Html 用于选择选项的 CSS 为透明背景
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23719520/
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
CSS for Select Option to be transparent background
提问by Cross Vander
I have a web page that have background-image in it. After that, there's a combo box for filtering some content. I want to create this select - option background being transparent. I've read many result at google to use select option at CSS, but it didn't work. I've create a fiddle in here : http://jsfiddle.net/25CQE/5For exampleand as You can see, the option background is not transparent. So, any idea how to solve that? Or it cannot be done by CSS?
我有一个包含背景图像的网页。之后，有一个用于过滤某些内容的组合框。我想创建这个选择 - 选项背景是透明的。我在 google 上阅读了很多结果以在 CSS 中使用 select 选项，但它没有用。我在这里创建了一个小提琴：http: //jsfiddle.net/25CQE/5For example，如您所见，选项背景不透明。那么，知道如何解决这个问题吗？或者它不能由CSS完成？
Sorry for my bad English
对不起，我的英语不好
回答by Mr. Alien
If you want to make it fully transparent, than use
如果你想让它完全透明，那么使用
select {
border: 1px solid #fff;
background-color: transparent;
}
If you are looking to have semi-transparent background color, than you can use rgba()where astands for alpha
如果您希望拥有半透明的背景颜色，则可以使用rgba()wherea代表alpha
select {
border: 1px solid #fff;
background-color: rgba(255,255,255,.5);
padding: 5px;
}
回答by b_uk_happy
Just add
只需添加
select {background:transparent;}
--edit additional --
--编辑附加--
You wont be able to style the options, because these take the style from the os or browser. You could try a javascript solution for nicer form elements such as http://uniformjs.com/- you could then use a transparent image perhaps
您将无法设置选项的样式，因为它们采用了操作系统或浏览器的样式。您可以尝试使用 javascript 解决方案来获得更好的表单元素，例如http://uniformjs.com/- 然后您可以使用透明图像
回答by Ezequiel De Simone
回答by becher henchiri
try this:
尝试这个：
body
{
background: #82caff;
}
select {
padding: 5px;
color: #000;
font-size: 12px;
background: transparent;
-webkit-appearance: none;
}
select option{
background-color: #82caff;
}<select id="nname">
<option value="volvo">Volvo</option>
<option value="peugeot">peugeot</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
