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., (-->)

I suspe

Answer 1

No, the down arrow is a browser element. It's built in [and different] in every browser. You can, however, replace the select box with a custom drop down box using javascript.

Jan Hancic mentioned a jQuery plugin to do just that.

Answer 2

You can't style combos very well using CSS.

The guys at FogBugz made a pretty good custom combo using JavaScript, so it is possible, it just takes a lot of work to get it right.

Better to stick with the standard one for version 1, then see if it's worth updating it once your app is in the wild.

Answer 3

I don't know if it is stylable with CSS (probably not in IE), but please: do not use a "fake" drop-down box using javascript, because the usability of these things usually is horrible. Among other things, keyboard navigation is usually absent.

Answer 4

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

Answer 5

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.