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

Question

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

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?

Answer 1

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

CSS

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

See Demo

The option tag does not support rgba colors yet.

Answer 2

i went a bit overboard :D

http://jsfiddle.net/bnhjq9sx/

.. gonna use this myself.

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; }