javascript - 设置下拉菜单背景的样式

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

如果您设置 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