How to Style Select Boxes with CSS3

HTML5, CSS3 and JavaScript

The Fine Art of Web Development by Martin Ivanov

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.

Before and After


Related Posts:

Categories and Tags

© 2006 - 2023 Martin Ivanov