CSS for the "down arrow" on a <select> element?

Question

Is it possible to stylize the down arrow on a drop down select element? i.e., (<select><option>--></option></select>)

I suspect the answer is no because of the way IE handles that particular element. If there isn't a way, does anyone know of a 'fake' drop down box using javaScript that would mimic that behavior but give me the ability to customize?

Answer 1

There's a cool CSS-only solution to styling dropdowns here: http://bavotasan.com/2011/style-select-box-using-only-css/

Basically, wrap the select in a container div, style the select to be 18px wider than the container with a transparent background, give overflow:hidden to the container (to chop off the browser-generated arrow), and add your background image with stylized arrow to the container.

Doesn't work in IE7 (or 6), but seriously, I say if you're using IE7 you deserve a less-pretty dropdown experience.

Answer 2

Maybe you can use jQuery selectbox replacement. It's a jQuery plugin.