Change list menu arrow to my errow?

Get Started
1

I need help.
I want to change the style and errow of list list Menu .
Here is HTML CODE:

<select id="el01">
  <option selected>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>

Here is CSS code:

#el01 {width:135px; border:1px solid #000000; height:18px} /* Width */
#el02 { /* Text and background colour, blue on light gray */
color:#00f;
background-color:#990000;
}
#el03 {background:url(listmenu.jpg)} /* Background image */
/*#el03 {background-image:url(listmenu.jpg)}*/
/*#el04 {border-width:6px}*/ /* Border width */
#el05 {border:9px dotted #00f} /* Border width, style and colour */
#el06 {border:none} /* No border */
#el07 {font-family:"Courier New",Courier} /* Different font */
#el08 {font-size:2em} /* Bigger text */
#el09 {font-size:0.5em} /* Smaller text */
#el10 {font-weight:bold} /* Bold text */
#el11 {padding:1em} /* Increase padding */
#el12 {text-align:right} /* Change text alignment */

Know i want to change the errow to my designing errow. I want this through CSS, no Jquer involved.
I am attaching the image that u want to use .
In this image you can see two errow pointing up and down. I want to replace that errow with the default one.

Please tell me how i can do that.

2

Hi,

There is an unwritten rule that you shouldn’t mess with form controls too much but leave them as users expect them to be. I know that sometimes its a pain because the default ones can be ugly but the truth of the matter is that elements like selects are almost impossible to style anyway.

There are very few properties available for styling and this varies greatly between browsers. Some browser will let you apply a background image and some will not. Some have proprietary code to change the look of form controls and some don’t so to change an element consistently is a nightmare.

IE6 and 7 will allow very little to change at all.

Here’s an example that will work in modern browsers (IE8+) but not opera and places the “transparent png image” on top of the select and uses [URL=“http://robertnyman.com/2010/03/22/css-pointer-events-to-allow-clicks-on-underlying-elements/”]pointer events to allow a click through. The original arrow of the select is hidden by cropping the area with overflow:hidden to hide the original arrow.

We could have used -webkit-appearance: none to hide the arrow in Safari/Chrome but Mozillas equivalent doesn’t work the same.

IE6 and 7 just get the normal select so the only one left in the cold is opera.

After all that effort - is it really worth it:)

3

Thank you so much Hampshire UK for the effort and helping in a difficult time.