Css 选择（下拉）的背景图像在Chrome中不起作用_Css_Google Chrome

Css 选择（下拉）的背景图像在Chrome中不起作用

css google-chrome

Css 选择（下拉）的背景图像在Chrome中不起作用,css,google-chrome,Css,Google Chrome,我想使用图像作为选择/下拉列表的背景。以下CSS在Firefox和IE中运行良好，但在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;} 通常

我想使用图像作为选择/下拉列表的背景。以下CSS在Firefox和IE中运行良好，但在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;}

通常，设置标准表单控件的样式被认为是一种不好的做法，因为每个浏览器上的输出看起来都很不一样。有关一些渲染示例，请参见

尽管如此，我还是幸运地将背景色设置为RGBA值：

<!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>


身体{
背景：#d00；
}
挑选{
背景：rgba（255255255,0.1）url（'http://www.google.com/images/srpr/nav_logo6g.png重复-x0；
填充：4px；
线高：21px；
边框：1px实心#fff；
}
福
酒吧
更长的

Google Chrome仍然会在背景图像的顶部以你传递给rgba（r，g，b，0.1）的颜色呈现渐变，但是选择一种与你的图像相匹配的颜色并使alpha为0.1会减少这种效果。

阿恩说的-你不能可靠地设置选择框的样式，也不能让它们在浏览器中看起来一致

Uniform：是一个javascript解决方案，它为您提供了对表单元素的良好图形控制——它仍然是javascript，但它与解决此问题的javascript一样好

select 
{
    -webkit-appearance: none;
}

如果需要，您还可以添加包含箭头的图像作为背景的一部分。

除了Firefox 30，您可以在所有浏览器中使用以下css样式

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: "";
}

演示页面-

已更新

以下是Firefox30的解决方案。firefox中自定义选择元素的小技巧：-moz-any（）css伪类

顺便说一句-这也会删除您在选择上的向下箭头图形。因为会有背景，这显然是背景图像的一部分。我总是喜欢解决方案而不是说教+1在Firefox中也有这样做的方法吗？我使下箭头消失…部分地解决了背景图像的问题，但是引入了可用性/表单控制一致性问题，并迫使你考虑选择箭头作为背景图像的一部分。不理想，但在某些情况下可能是好的。向应用于选择元素的类添加行高度可以解决此问题。谢谢。在IE中不起作用，在MS Edge中，它在背景上显示文本