Question

我有一个网页，里面有背景图片。之后，有一个用于过滤某些内容的组合框。我想创建这个选择 - 选项背景是透明的。我在google上阅读了很多结果，在CSS上使用了select选项，但它没有用。我在这里创建了一个小提琴：http://jsfiddle.net/25CQE/5 For example正如您所看到的，选项背景并不透明。那么，任何想法如何解决？或者它不能通过CSS完成？

抱歉我的英文不好

Answer 1

如果您想使其完全透明，请使用

select {
    border: 1px solid #fff;
    background-color: transparent;
}

Demo

如果您希望使用半透明背景色，那么您可以使用rgba() a代表 alpha

select {
    border: 1px solid #fff;
    background-color: rgba(255,255,255,.5);
    padding: 5px;
}

Demo 2

Answer 2

添加

select {background:transparent;}

- 编辑其他 -

您无法为选项设置样式，因为这些选项采用了os或浏览器的样式。您可以尝试使用javascript解决方案来获得更好的表单元素，例如http://uniformjs.com/ - 然后您可以使用透明图像

Answer 3

您可以通过以下方式更改css文件或样式上的选项选项的颜色：

select option {
    background-color: transparent; 
}

或主要选择输入

select {
    background-color: transparent; 
}

demo

Answer 4

尝试一下：

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>

选择选项的CSS为透明背景

4 个答案: