Background Image for Select (dropdown) does not work in Chrome

Question

I want to use an image for the background of a select/dropdown. The following CSS works fine in Firefox and IE, but does not in Chrome:

#main .drop-down-loc { width:506px; height: 30px; border: none;    background-color: Transparent;    background: url(images/text-field.gif) no-repeat 0 0;    padding:4px; line-height: 21px;} 

Answer 1

select  {     -webkit-appearance: none; } 

If you need to you can also add an image that contains the arrow as part of the background.

Answer 2

What Arne said - you can't reliably style select boxes and have them look anything like consistent across browsers.

Uniform: https://github.com/pixelmatrix/uniform is a javascript solution which gives you good graphic control over your form elements - it's still Javascript, but it's about as nice as javascript gets for solving this problem.