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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/17752573/
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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 23:35:27  来源:igfitidea点击:

Changing the background color of a drop down list transparent in html

css

提问by user2557464

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

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

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

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?

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

回答by Jeff Noel

You can actualy fake the transparencyof optionDOMElements with the following CSS:

您可以actualy假透明度option有以下CSS DOMElements:

CSS

CSS

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

See Demo

看演示

The optiontag does not support rgbacolors yet.

option标签尚不支持rgba颜色。

回答by Developer

HTML

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

CSS

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

回答by Pepys

Or maybe

或者可能

 background: transparent !important;
 color: #ffffff;