33

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;}
Danny G
  • 3,660
  • 4
  • 38
  • 50
Ashish
  • 391
  • 1
  • 3
  • 7

4 Answers4

81
select 
{
    -webkit-appearance: none;
}

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

Danny G
  • 3,660
  • 4
  • 38
  • 50
  • 14
    btw - this will remove your down arrow graphic on select too. – easwee Jul 04 '11 at 15:06
  • 2
    since there will a background, that can clearly be part of the background image. – Danny G Jul 07 '11 at 18:27
  • 8
    I always prefer solution over preaching! +1 – patentfox Mar 22 '12 at 06:51
  • 1
    Is there a way to do it in Firefox as well ? I meam make the down arrow to disappear ... – Stphane Dec 11 '12 at 15:10
  • Partially solves the issue of the background-image, but introduces usability/form-control consistency issues, and forces you to consider the select arrow as part of your background image. Not ideal, but might be good in certain cases. – JuanOjeda Apr 03 '13 at 04:46
  • Thanks, this solved the chrome issue. I had the arrow image to my background image. – codingbbq May 09 '13 at 10:55
6

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.

Blake Frederick
  • 1,510
  • 20
  • 31
Ben Hull
  • 7,524
  • 3
  • 36
  • 56
4

Generally, it's considered a bad practice to style standard form controls because the output looks so different on each browser. See: http://www.456bereastreet.com/lab/styling-form-controls-revisited/select-single/ for some rendered examples.

That being said, I've had some luck making the background color an RGBA value:

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background: #d00;
      }
      select {
        background: rgba(255,255,255,0.1) url('http://www.google.com/images/srpr/nav_logo6g.png') repeat-x 0 0; 
        padding:4px; 
        line-height: 21px;
        border: 1px solid #fff;
      }
    </style>
  </head>
  <body>
    <select>
      <option>Foo</option>
      <option>Bar</option>      
      <option>Something longer</option>     
  </body>
</html>

Google Chrome still renders a gradient on top of the background image in the color that you pass to rgba(r,g,b,0.1) but choosing a color that compliments your image and making the alpha 0.1 reduces the effect of this.

Arne Roomann-Kurrik
  • 1,072
  • 7
  • 9
0

You can use the CSS styles below for all browsers except Firefox 30:

select {
  background: url(dropdown_arw.png) no-repeat right center;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  width: 90px;
  text-indent: 0.01px;
  text-overflow: "";
}

Updated

Here is a solution for Firefox 30. There is a little trick for custom select elements in firefox :-moz-any() CSS pseudo class.

xxx
  • 1,153
  • 1
  • 11
  • 23
kva
  • 486
  • 4
  • 15