Styling the arrow of a <select> element?

Question

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!

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.