樣式下拉

Question

我試圖擺脫在下拉菜單中的選項後面的白色背景的大背景下，到目前爲止，這是我的代碼：

CSS: 

select { 
    margin: 50px; 
    border: 1px solid white; 
    background: transparent; 
    width: 50%; 
    padding: 5%; 
    height: 50%; 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    appearance: none; 
} 
select > option 
{ 
color:transparent; 
} 
    .blueLabel 
{ 
background: linear-gradient(to right bottom, #2D3C43 0%,#2D3C43 50%,#243137 50%,#243137 100%); 
} 

HTML：

<div class = "blueLabel"> 
<select> 
    <option>option 1</option> 
    <option >Kuku</option> 
    <option>Yeah, why not</option> 
    <option>I think is = 7</option> 
</select> 
<div> 

Fiddle

我希望它是透明的。問題是，無論我做什麼它仍然是白色的，我無法擺脫它

Answer 1

如果設置了選擇元素的size物業（連同background: transparent），你會得到這樣的：

您可以添加事件偵聽器，以便size屬性更改只有當選擇框有重點。你必須要小心傳播的事件，你需要模糊上點擊選擇框，但不是重點：

var sel= document.querySelector('select'), 
    inSelect= false, 
    timer; 

sel.addEventListener('focus', function() { 
    this.size= this.options.length; 
    clearTimeout(timer); 
    timer= setTimeout(function() { 
    inSelect= true; 
    },500); 
}); 

sel.addEventListener('blur', function() { 
    clearTimeout(timer); 
    inSelect= false; 
    this.size= 1; 
}); 

sel.addEventListener('change', function() { 
    this.blur(); 
}); 

sel.addEventListener('click', function(event) { 
    if(inSelect) { 
    this.blur(); 
    } 
    else { 
    event.preventDefault(); 
    event.stopPropagation(); 
    return false; 
    } 
}); 

Working Fiddle

Answer 2

您可以僞造它非常接近通過background-color：

select > option { 
    background-color: blue; 
} 

更新小提琴：http://jsfiddle.net/0s1moa4a/2/

如果您確實需要透明選項背景，請參閱this answer，這表明使用第三方控件作爲真正透明背景對於純CSS是不可能的。

Answer 3

我沒有測試這一點，但大多數元素似乎去透明帶這種方法：

background-color:rgba(0,0,0,0);

其實，這是行不通的。看來只有不透明的背景可以在CSS中的選擇器選項下拉窗格上呈現。那太蹩腳了。