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

Question

我正在尝试将 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;

}

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

原文由 user2557464 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您实际上可以使用以下 CSS 伪造 option DOMElements 的透明度：

CSS

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

看演示

option 标签还不支持 rgba 颜色。

原文由 Jeff Noel 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我有点过火了：D

http://jsfiddle.net/bnhjq9sx/

..我自己会用这个。

HTML:

 <div class="select">
Select
<ul>
    <li><a href="#">Item 1</a>
        <ul>
          <li><a href="#">Item 1a</a></li>
          <li><a href="#">Item 1b</a></li>
          <li><a href="#">Item 1c</a></li>
        </ul>
    </li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
</ul>
</div>
<link href="https://fonts.googleapis.com/css?family=Open+Sans|ABeeZee|Aclonica|Acme|Actor|Advent+Pro|Akronim|Alex+Brush|Architects+Daughter|Archivo+Black|Baloo|Bebas+Neue|Caveat|Chewy|Cookie|Cormorant|Courgette|Covered+By+Your+Grace|Dancing+Script|El+Messiri|Exo|Exo+2|Galada|Gloria+Hallelujah|Great+Vibes|Handlee|Indie+Flower|Kalam|Kaushan+Script|Khula|Knewave|Krona+One|Lacquer|Lemonada|Lusitana|M+PLUS+1p|Marck+Script|Merienda+One|Modak|Montserrat|Montserrat+Alternates|Mr+Dafoe|Nanum+Pen+Script|Noto+Serif+JP|Odibee+Sans|Oleo+Script|Orbitron|PT+Sans|Parisienne|Pathway+Gothic+One|Permanent+Marker|Playball|Pridi|Quattrocento+Sans|Rock+Salt|Sacramento|Saira+Condensed|Saira+Extra+Condensed|Saira+Semi+Condensed|Satisfy|Shadows+Into+Light|Shadows+Into+Light+Two|Sigmar+One|Signika+Negative|Slabo+27px|Source+Code+Pro|Special+Elite|Spectral|Spinnaker|Sriracha|Unica+One|Acme|Lato:300,300i,400,400i|Montserrat|Mukta+Malar|Ubuntu|Indie+Flower|Raleway|Pacifico|Fjalla+One|Work+Sans|Gloria+Hallelujah&amp;display=swap" rel="stylesheet">

CSS：

 body { background : url('https://img.freepik.com/free-vector/christmas-tree-fir-branch-seamless-background-vector-illustration-eps-10_87521-4016.jpg?w=740&t=st=1661904867~exp=1661905467~hmac=43e432bac890a524eac1beca38685e8aa0bfd271d2c083e230dd9e8d7743a00a'); font-family:Montserrat;}
div.select {
    margin: 20px;
    padding: 10px;
    background: rgba(255,255,255,0.7);
    border: 3px ridge purple;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    width: 150px;
    box-shadow : inset 2px 2px 2px 2px rgba(0,0,0,0.55), 2px 2px 2px 2px rgba(0,0,0,0.6);
}
div.select:hover {
border : 3px ridge lime;
}
div.select > ul {
display: none; width: 200px; left: 25px; position: absolute;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
div.select > ul > li {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
div.select:hover > ul > li > a { color : lime; }
div.select:hover > ul {display: block; background: rgba(0,0,150,0.5); border: 1px solid purple;}
div.select:hover > ul > li { padding: 5px;}
div.select:hover > ul > li:hover { background: white;}
div.select:hover > ul > li:hover > a { color: red; }

div.select > ul > li:nth-child(1):hover > ul {
    display: none; height: 90px; width: 200px; left: 150px; position: absolute;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
div.select:hover > ul > li:nth-child(1):hover > ul > li > a { color : lime; }
div.select:hover > ul > li:nth-child(1):hover > ul {
display: block; background: rgba(0,0,75,0.75); border: 1px solid purple;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
div.select:hover > ul > li:nth-child(1) > ul > li { padding: 5px; display: none;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
div.select:hover > ul > li:nth-child(1):hover > ul > li { padding: 5px; display: block; }
div.select:hover > ul > li:nth-child(1):hover > ul > li:hover { background: white; }
div.select:hover > ul > li:nth-child(1):hover > ul > li:hover > a { color: red; }

原文由 Rene Veerman 发布，翻译遵循 CC BY-SA 4.0 许可协议