css opacity and selects
More recently, I came across one entertaining CSS bug / feature, I decided to share, maybe someone will come in handy.
It was necessary on the site to create a choice of cities from the list, the standard list did not fit for aesthetic reasons, the result should look like a “link” when you click on which the list of available cities falls out, the task is commonplace, but then I stumbled upon the entertaining behavior of browsers, and as it turned out everyone has the same thing.
And so, it turns out that if you set transparency for the standard select, then it will become transparent, but the list itself remains opaque, entertaining and quite useful behavior.
example css:
example html:
UPD
Thanks PVOID , under poppy in safari everything is ok too.
UPD2
norfild , drew attention to the fact that in IE6 it still doesn’t work :-(
UPD3 The
question arose about the fact that the opacity property is not in IE. Therefore, I clarified that it was assigned to jQuery.
IE - filter: alpha (opacity = 50);
UPD3
Dlussky proposed a funny solution that works in IE6 too :-) But unfortunately, when using it, you won’t be able to style how you want the text :-(
It was necessary on the site to create a choice of cities from the list, the standard list did not fit for aesthetic reasons, the result should look like a “link” when you click on which the list of available cities falls out, the task is commonplace, but then I stumbled upon the entertaining behavior of browsers, and as it turned out everyone has the same thing.
And so, it turns out that if you set transparency for the standard select, then it will become transparent, but the list itself remains opaque, entertaining and quite useful behavior.
example css:
example html:
Москва
- It was tested in IE7-8, Chrome 5, FF 3.6.3, Opera 10.5, as well as under Linux, everywhere the behavior is the same.
- In a working example, opacity sets jQuery so that users without JS see a regular select.
- A working example can be found here .
- Text in span.link is set by onchange
UPD
Thanks PVOID , under poppy in safari everything is ok too.
UPD2
norfild , drew attention to the fact that in IE6 it still doesn’t work :-(
UPD3 The
question arose about the fact that the opacity property is not in IE. Therefore, I clarified that it was assigned to jQuery.
IE - filter: alpha (opacity = 50);
UPD3
Dlussky proposed a funny solution that works in IE6 too :-) But unfortunately, when using it, you won’t be able to style how you want the text :-(