Css For Select Option To Be Transparent Background

I have a web page that have background-image in it. After that, there's a combo box for filtering some content. I want to create this select - option background being transparent.

Solution 1:

If you want to make it fully transparent, than use

select {
    border: 1px solid #fff;
    background-color: transparent;
}

Demo

---

If you are looking to have semi-transparent background color, than you can use rgba() where a stands for alpha

select {
    border: 1px solid #fff;
    background-color: rgba(255,255,255,.5);
    padding: 5px;
}

Demo 2

Solution 2:

Just add

select {background:transparent;}

--edit additional --

You wont be able to style the options, because these take the style from the os or browser. You could try a javascript solution for nicer form elements such as http://uniformjs.com/ - you could then use a transparent image perhaps

Solution 3:

you can change the color for select option on css file or style, the following way:

select option {
    background-color: transparent; 
}

or for the main select input

select {
    background-color: transparent; 
}

demo

Solution 4:

try this:

body 
{
background: #82caff;
}

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

}
select option{
background-color: #82caff;
}

<selectid="nname"><optionvalue="volvo">Volvo</option><optionvalue="peugeot">peugeot</option><optionvalue="mercedes">Mercedes</option><optionvalue="audi">Audi</option></select>