html select arrow look

Question

Hi!

In my html select element I would like to show a black arrow and no background.

How can I do it?

Answer 1

One way would be to use a background image for the select. However, it's not well supported. Personally, I wouldn't use a select for this.

See this for more info: http://doctype.com/styling-select-elements-backgrounds-etc

Here's an alternative method which may work: http://pennypacker.net/articles/css_tricks_select_menu

Answer 2

Hi,

You can use a plugin for jQuery, I actually contributed to such a jQuery plugin and you can find the code on github.

The plugin allows you to cusomize the look and feel of the select boxes in your application, not just the arrow but the entire behavior can be customized.

Here's a link to the source code on github (forked) http://github.com/KensoDev/Stylish-Select

This was tested in IE6,7,8 FF Chrome...