CSS 选择（下拉）的背景图像在 Chrome 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2226666/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Background Image for Select (dropdown) does not work in Chrome
提问by Ashish
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:
我想使用图像作为选择/下拉菜单的背景。以下 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;}
回答by Danny G
select
{
-webkit-appearance: none;
}
If you need to you can also add an image that contains the arrow as part of the background.
如果需要，您还可以添加包含箭头的图像作为背景的一部分。
回答by Ben Hull
What Arne said - you can't reliably style select boxes and have them look anything like consistent across browsers.
Arne 所说的 - 您无法可靠地设置选择框的样式并使它们在浏览器中看起来一致。
Uniform: https://github.com/pixelmatrix/uniformis 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.
Uniform：https: //github.com/pixelmatrix/uniform是一个 javascript 解决方案，它可以让您对表单元素进行良好的图形控制 - 它仍然是 Javascript，但它与解决这个问题的 javascript 一样好。
回答by Arne Roomann-Kurrik
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.
通常，设置标准表单控件的样式被认为是一种不好的做法，因为每个浏览器的输出看起来都非常不同。有关一些渲染示例，请参阅：http: //www.456bereastreet.com/lab/styling-form-controls-revisited/select-single/。
That being said, I've had some luck making the background color an RGBA value:
话虽如此，我有一些运气使背景颜色成为 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>
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.
谷歌浏览器仍然会在背景图像的顶部以您传递给 rgba(r,g,b,0.1) 的颜色呈现渐变，但选择一种与您的图像相得益彰的颜色并使 alpha 为 0.1 会减少这种影响。
回答by kva
you can use the below css styles for all browsers except Firefox 30
您可以对除 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: "";
}
demo page - http://kvijayanand.in/jquery-plugin/test.html
演示页面 - 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.
这是 Firefox 30 的解决方案。 firefox 中自定义选择元素的小技巧：-moz-any() css 伪类。
