Change background color in html transparent dropdown

Question

I am trying to change the background color of a dropdown 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 remains white and the text remains black. Any ideas?

Answer 1

You can really 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 yet support rgba colors.

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

Answer 3

Or maybe,

  background: transparent !important; color: #ffffff;