Styling the arrow of a element? Asked Sep 01 '11 at 20:43 Active Feb 01 '15 at 16:34 Viewed 3,610 times 3 How would you style the color of only the arrow of a element? The "Background color" attribute alters the color of both the text and the arrow. I just want to color the arrow. Example of a select element with a green backgrounded arrow on iOS Thanks! html css edited Feb 01 '15 at 16:34 Deduplicator 44,692 7 66 118 asked Sep 01 '11 at 20:43 Robert Bana 2,135 3 17 23 2 possible duplicate of [CSS for the "down arrow" on a element?](http://stackoverflow.com/questions/458657/css-for-the-down-arrow-on-a-select-element) – BoltClock Sep 01 '11 at 20:48

Answer 1

You can't. The default SELECT is a form element rendered by the browser and/or OS.

What you have to do is built-your-own akin to something like this:

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

Answer 2

I'm not sure there's a way to change the native select element.

I think you must create it by your self using some JS or the much easier way use a jQuery UI plugin, like this: http://www.filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/

This question has been here before, see Is it possible to style a select box? which roughly gives the same answer.