css - 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.