How to customize only arrow of <select> dropdown?

Question

This is code of dropdown

<select id="dropdown">
                <option value="">Go to page...</option>
                <option value="http://stackoverflow.com"&gt;CSS-Tricks&lt;/option&gt;
                <option value="http://superuser.com"&gt;Digging Into WordPress</option>
                <option value="http://metastackoverflow.com"&gt;Quotes on Design</option>
            </select>

I just want to customize arrow image background and border? I know many jquery and moo tools plugins but i want light and simple and customizable jquery way?

Answer 1

Its not possible to just style that. I wrote selectzor a while back to meet these needs though. Check it out below.

http://jeremy.infinicastonline.com/2010/01/selectzor/

Answer 2

Drop-downs are rendered by the OPERATING SYSTEM, not the BROWSER. You have no control over this other than to roll-your-own.

Answer 3

You can’t style it with jQuery either. jQuery isn’t a magic wand that lets you do anything you can imagine to a web page.

Generally, your options for styling form controls are going to be quite limited, because:

1. It’d be complicated for browser makers to let form controls be styleable; and

2. It’s actually good that form controls always look the same. It means that users know what they are, and thus what’ll happen when they click on them.