Question

对于选择元素倍数，我想删除所选选项的背景颜色，因为我在每个选项前用方框表示选择。目的是为选择的多个元素提供一个复选框样式。

为什么使用选择倍数？我在Angular App中工作，应该选择多个复选框作为复选框。这样做我将能够使用角度验证，ng-options等。我可以使用输入类型复选框构建相同的界面，但这意味着更多的代码用于相同的功能。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

我认为你正在寻找这个

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

如何覆盖select元素的默认样式

1 个答案: