在html中更改透明下拉列表的背景颜色

I'm trying to change the background color of a drop down list in HTML to transparent.

我正在尝试将HTML中下拉列表的背景颜色更改为透明。

HTML

<select id="nname">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select> 

CSS

#nname {
    padding: 5px;
    color: #000;
    font-size: 12px;
    background: transparent;
    -webkit-appearance: none;

}

however, the background stays white and the text stays black. Any ideas?

但是,背景保持白色,文本保持黑色。有任何想法吗?

3 个解决方案

#1

You can actualy fake the transparency of option DOMElements with the following CSS:

您可以使用以下CSS实际伪造选项DOMElements的透明度:

CSS

option { 
    /* Whatever color  you want */
    background-color: #82caff;
}

See Demo

The option tag does not support rgba colors yet.

选项标签尚不支持rgba颜色。

#2

HTML

<select id="nname" class="specialColor">
  <option class="specialColor" value="volvo">Volvo</option>
  <option class="specialColor" value="saab">Saab</option>
  <option class="specialColor" value="mercedes">Mercedes</option>
  <option class="specialColor" value="audi">Audi</option>
</select> 

CSS

.specialColor { 
    /* Whatever color  you want */
    background-color: #82caff;
}

#3

Or maybe

 background: transparent !important;
 color: #ffffff;