How to Style Select Boxes with CSS3

You can find a newer, metro-style look and feel solution for drop down styling with CSS3 is found on this page. You may also want to check AcidJs.Forms for a complete form-styling solution with CSS3 and JavaScript.

It is a truth universally acknowledged (no, I don’t like Jane Austen) that even with the power of CSS3, select boxes are very hard to style (of course, you can use the CSS3 appearance property, but it is still tricky and buggy, and is best supported only by Chrome). Fortunately, there exist a few tricks that can be used to achieve custom styling. Here’s mine, and it does not use any JavaScript, the semantics and the accessibility of the element are preserved, simply because I did not replace the control with custom markup. I just wrapped it in a span.

The code follows, but if you are impatient to give it a try.

Related Posts:

• Windows 8 Metro Style Tiles in HTML5, CSS3 and JavaScript
• Skinnable CSS3 Metro Forms
• CSS3 Metro Dropdown Styling
• CSS3 Treeview. No JavaScript.
• HTML5 Resume Generator and Onepager Website
• CSS3 Driven Slides Viewer Without any JavaScript
• Fully Functional CSS3-only Tabstrip Without JavaScript
• Imageless CSS3 Custom Checkboxes and Radio Buttons
• Creating Gaussian Blur Effect With CSS3
• Selecting only the first element occurence out of siblings with the same class name with CSS3
• CSS3 Element Reflections
• Fancy CSS3 Toolips (Yeah, Without Any JavaScript)
• CSS3 iPhone Toggle Buttons
• CSS3 Background Image Cropping