设置下拉列表的背景样式

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

使用background-color：

可以非常接近地伪造它

select > option {
    background-color: blue;
}

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

如果你真的想要透明的选项背景，请参阅this answer，建议使用第三方控件作为真正透明的背景，使用纯CSS是不可能的。

Answer 2

如果你设置了select元素的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 3

我没有对此进行测试，但大多数元素似乎都采用这种方法透明：

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

实际上，这不起作用。看起来只有不透明的背景可以在CSS中的选择器选项下拉窗格中呈现。那有些蹩脚。