Question

我想将图像用作选择/下拉列表的背景。以下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;}

Answer 1

select 
{
    -webkit-appearance: none;
}

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

Answer 2

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

统一：https://github.com/pixelmatrix/uniform是一个javascript解决方案，它可以让你对表单元素进行良好的图形控制 - 它仍然是Javascript，但它与javascript解决这个问题一样好。

Answer 3

通常，对标准表单控件进行样式设计被认为是一种不好的做法，因为每个浏览器的输出看起来都不同。有关呈现的示例，请参阅：http://www.456bereastreet.com/lab/styling-form-controls-revisited/select-single/。

话虽这么说，我有一些运气使背景颜色成为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>

谷歌浏览器仍会在背景图像的顶部呈现渐变，颜色会传递给rgba（r，g，b，0.1），但选择的颜色会使您的图像变得有趣并使得alpha 0.1会降低此效果

Answer 4

您可以将以下css样式用于除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: "";
}

演示页 - http://kvijayanand.in/jquery-plugin/test.html

<强>更新

这里是Firefox 30的解决方案。在firefox中自定义选择元素的小技巧：-moz-any（）css伪类。

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

选择背景图片（下拉列表）在Chrome中不起作用

4 个答案: