How to replace the dropdown list arrow with my own ?

Question

What would be the easiest method to replace the default arrow of the dropdown list with my own arrow image ?

Answer 1

The only good looking solution I've found is by using jQuery UI and this plugin.

http://www.filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/

Answer 2

The styling of the default arrow totally depends on th kind of O.S you use.You can check the drop down box in Windows, linux they will take default O.S styling.

The best way to style the arrow is to use jquery plugin like : http://www.dev4press.com/jgd/dropdown/ http://plugins.jquery.com/taxonomy/term/463

Answer 3

I suggest you to use Uniform. It allows you to mask your standard controls with something sexy using JQuery: http://pixelmatrixdesign.com/uniform

You'll be able to replace your dropdown list by using this simple line:

$(function(){ $("select").uniform(); });

You can also change your radio buttons and checkboxes by using the same method. There is still some downloadable themes available at the bottom of that page.