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

×

Your Default Settings - Preferences

×
×
×

Validations

(Errors from your JS or Pre-Processors code)

    HTML
    CSS
    JavaScript

    Styling Select Box with CSS3

    CSSDeck G+