How can I replace the arrow button on an HTML <select> element

What's the best way to replace the arrow image 开发者_如何学Cin a dropdown with a different one?

You can't. It's rendered by the operating system, not HTML.

You need to write/use a HTML/CSS SELECT replacement using DIVs.

a bit more information would be rally great. i can only speculate you're trying to style a html-<select>-box? if so: you can't really replace that image.

but: you could build something similar on your own to replace it - or, if you're using jquery-ui, this looks really great.

Wrap the Select in a DIV and give it a class. The class for this DIV should have a background image (your arrow) plus height and width to cover the select size.

Then add a class to your Select and then in your CSS you need to do a few things to make the browsers happy. Height, width, padding, color, font, margin and border is all optional for the select but you need to make the background of the select transparent and add -webkit-appearance:none and -moz-appearance:none to keep the default browser arrow from appearing.