如何覆盖多个选择元素的默认样式答案

【问题标题】：How override default styles for a select element multiple如何覆盖多个选择元素的默认样式
【发布时间】：2016-11-16 17:59:17
【问题描述】：

对于多个选择元素，我想删除所选选项的背景颜色，因为我用每个选项之前的框来指示选择。目的是为选择多个元素提供复选框样式。

为什么要使用多选？我在一个 Angular 应用程序中工作，应该是有用的样式选择多个作为复选框的集合。这样做我将能够使用角度验证、ng-options 等。我可以使用输入类型复选框构建相同的界面，但这意味着同一功能需要更多代码。

.form-group{
  margin: 10px 0 0 20px;
}
select[multiple]{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
  	border: none;
	overflow: hidden;
	box-shadow: none;
}
select[multiple].form-control{
  padding: 6px 0 6px 6px;
}

select[multiple] option{
  padding: 5px 0 7px 0;
}

select[multiple]:focus{
  box-shadow: none;
}

select[multiple]:focus option:checked{
  background-color: white;
}

select[multiple] option:before, 
select[multiple] option:after{
  content: "";
  display: inline-block;
  position: absolute;
  width: 17px;
  height: 17px;
  left: 0;
  margin-left: 12px;
  border: 1px solid #ccc;
  border-radius: 3px;
  background-color: #fff;
}
select[multiple]:focus option:checked:before{
  background: white;
}
select[multiple] option:checked:before{
  background-color: #319DB5;
  border-color: #2c8ca1;
}
select[multiple] option:checked:after{
  background-color: gray;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<body>
  <div class="container">
    <div class="form-group">
      <label for="someOptions">Select multiple</label>
      <select multiple="multiple" class="form-control" size="10" name="options" required="required" id="someOptions">
        <option label="Option 1" value="number:1">Option 1</option>
        <option label="Option 2" value="number:2">Option 2</option>
      </select>
    </div>
  </div>
</body>

【问题讨论】：

我不认为有办法......如果你绝对需要这个，最简单的方法是使用下拉菜单类型的东西并使用 JS 来处理它。

标签： html css

【解决方案1】：

我想你正在寻找这个

select[multiple] option:checked { background: none; }

【讨论】：

这似乎是一种内部浏览器样式。我已经尝试通过提供选择和选项 ID 来获得更具体的信息，但它仍然不会覆盖......
我已经用jsfiddle.net/r0958y30 覆盖了背景颜色，但无法让它将字体颜色保留为黑色。
谢谢卢克。我结束了将其呈现为复选框的集合。看起来浏览器不支持这种自定义。权衡是对更改进行自定义验证。
@LukeBecker 设法用-webkit-text-fill-color: yellow 改变颜色，似乎得到很好的支持developer.mozilla.org/fr/docs/Web/CSS/-webkit-text-fill-color :)