Select（下拉）的背景图片在Chrome中不起作用

我想将图片用于选择/下拉菜单的背景。下面的CSS在Firefox和IE罚款，但在Chrome不会：Select（下拉）的背景图片在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;}

来源

2010-02-09 Ashish

一般情况下，它被认为是一个不好的做法，风格标准表单控件，因为输出看起来每个浏览器如此不同。有关一些渲染示例，请参阅：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>

谷歌Chrome仍然会呈现在彩色背景图像，你传递给RGBA顶部的梯度（ r，g，b，0.1），但是选择一种颜色来补充图像并使alpha 0.1减少这种效果。

来源

2010-02-12 21:49:52

将行高添加到应用于选择元素的类可以解决问题。谢谢。 – 2014-02-12 10:39:33

Arne说了什么 - 你无法可靠地设计选择框的样式，并让它们在浏览器中看起来像一致。

统一：https://github.com/pixelmatrix/uniform是一个JavaScript解决方案，它可以让您对表单元素进行良好的图形控制 - 它仍然是Javascript，但它的功能与JavaScript解决此问题的效果相当。

来源

2010-05-17 16:13:36 Beejamin

感谢这颗宝石。让我的生活更轻松 – heymrcarter 2011-03-02 15:34:41

谢谢。非常好... – AEMLoviji 2011-06-24 06:35:40

select 
{ 
    -webkit-appearance: none; 
}

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

来源

2011-05-12 03:24:09

+13

顺便说一句 - 这将删除您选择的向下箭头图形了。 – easwee 2011-07-04 15:06:20

因为会有背景，可以清楚地成为背景图像的一部分。 – 2011-07-07 18:27:12

我总是比传道更喜欢解决方案！ +1 – kaustubh 2012-03-22 06:51:18

您可以使用下面的CSS样式对于所有浏览器，除了火狐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

更新

这里是火狐30.自定义小窍门解决方案在Firefox中选择元素：-moz-any（）css伪类。

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

来源

2014-06-12 09:55:30 kva

Select（下拉）的背景图片在Chrome中不起作用

回答

相关问题