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;}
0

4 Answers 4

80
select 
{
    -webkit-appearance: none;
}

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

6
  • 14
    btw - this will remove your down arrow graphic on select too.
    – easwee
    Commented Jul 4, 2011 at 15:06
  • 2
    since there will a background, that can clearly be part of the background image.
    – Danny G
    Commented Jul 7, 2011 at 18:27
  • 8
    I always prefer solution over preaching! +1
    – patentfox
    Commented Mar 22, 2012 at 6:51
  • 1
    Is there a way to do it in Firefox as well ? I meam make the down arrow to disappear ...
    – Stphane
    Commented Dec 11, 2012 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
    Commented Apr 3, 2013 at 4:46
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.

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

1
  • Adding line height to class applied to select element solves the problem. Thanks. Commented Feb 12, 2014 at 10:39
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.

1
  • 1
    Does not work in IE and in MS Edge it is showing text on top of the background
    – AL̲̳I
    Commented May 16, 2018 at 10:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.