Ajax Loader
×

Styling Select Box with CSS3

Damoin Yeatman is responsible for this little experiment where he tried to prettify the default select form control with some CSS3 love. The best part about this item is the custom arrows in the select box. It's a neat little trick where the author rotated '<>' by 90 degrees with CSS3 transforms.

Note pointer-events: none; on the :after pseudo element is quite important to make sure that the dropdown opens when the arrows are clicked. It makes sure that the pseudo element does not receive any hover/click event, instead the event occurs on what is behind it, i.e., the label element.

Related:

×

Coding Preferences


HTML

CSS

Javascript

More

13 Comments

× New

Sign In to comment

SubCon:

Great thinking!! Short an elegant. Its a pity though that IE does not support it, but we can easily disable the effect and go back to default there...

crisvass:

not working for me in ie10 but working great on all other browsers. tried to apply some of the fixes suggested but nothing works.

alexdoumas:

I cant find a solution for IE or Opera to open the selectbox.

I did try with jquery but with no result.

The only solution that i found was to hide :after element in IE and Opera.

Masum :

I think the collapsed menu need more styling like the selected one. Looks something static.
Although Excellent work & Good for learning some trick for me. Thanks

regimantasx:

Yes problem with opera, it need prefix for opera browser :(

Rishabh :

nah, there is no fix to this problem. IE9 does not support CSS3 pointer-events property.

LukyVj:

Apple logo was already fixed ;)
I do this one later !

Rishabh :

Since i can't see/produce the issue, help us out by suggesting a fix if you can. Same with the apple logo problem.

×

Your Default Settings - Preferences

×
×
×

Validations

(Errors from your JS or Pre-Processors code)

    HTML
    CSS
    JavaScript
    CSSDeck G+