How to add style on form select element only with CSS

Yesterday I got a select box need adding some style on it. For some reason, I hope it is styled only by pure CSS and HTML.

I know with some Jquery plugin,  we can easily add cross browser style on the select box. But some time they using a way to add some html layer on it and changed the original html. Like selectize.js .

That will cause me can not using Jquery to do some operation on the select options. So I searched on google and then I found a better solution.

http://lea.verou.me/2011/03/custom-select-drop-downs-with-css3/

Code demo:

http://jsfiddle.net/leaverou/XxkSC/light/

This is only working on Webkit and Gecko. For IE, I don’t care much about that.

 

Leave a Reply