How to Style Select Boxes with CSS3

Try Semtex – the new HTML5, CSS3 and JavaScript UI framework!

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:

About these ads

24 comments

    1. Hey Clément, thanks for the proposal, however I believe that much more valuable information on generated content than I can provide can be found on WHATWG and W3C websites.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s