发表新帖
发表新帖

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

后端 未结
关注
4 1660
长情又很酷
长情又很酷 2020-11-27 03:45

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
相关标签:
4条回答
  • 温柔的废话
    2020-11-27 03:56

    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.

    0 讨论(0)
  • 闹比i
    2020-11-27 03:58

    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 讨论(0)
  • 刺人心
    2020-11-27 04:04 
    select 
{
    -webkit-appearance: none;
}

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

    0 讨论(0)
  • 深忆病人
    2020-11-27 04:04

    you can use the below css styles 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: "";
}

    demo page - http://kvijayanand.in/jquery-plugin/test.html

    Updated

    here is solution for Firefox 30. little trick for custom select elements in firefox :-moz-any() css pseudo class.

    http://blog.kvijayanand.in/customize-select-arrow-css/

    0 讨论(0)
 看不清?
提交回复
热议问题