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

Solution 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.

Solution 2:

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

Solution 3:

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.

Solution 4:

The drop-down is platform-level element, you can't apply CSS to it.

You can overlay an image on top of it using CSS, and call the click event in the element beneath.