如何覆盖多个select元素的默认样式 [英] How override default styles for a select element multiple
问题描述
对于一个select元素，我想删除所选选项的背景色，因为我要在每个选项前的方框中指明所选内容. 目的是为选择多个元素提供复选框样式.
For a select element multiple I want to remove the background color of the selected option as I'm indicating the selection with the box before each option. The intention is give a checkbox style to a select multiple element.
为什么要使用选择倍数? 我在Angular应用程序中工作，并且应该是一个有用的样式(选择多个)作为复选框的集合.这样做，我将能够使用角度验证，ng-options等.我可以使用输入类型复选框构建相同的接口，但这意味着同一功能需要更多代码.
Why using a select multiple? I'm working in a Angular App and should be useful style a select multiple as a collection of checkboxes. Doing that I will be able to use angular validations, ng-options, etc. I can build the same interface with inputs type checkbox but that imply a lot more of code for the same piece of functionality.
.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>
推荐答案
我认为您正在寻找
select[multiple] option:checked { background: none; }
这篇关于如何覆盖多个select元素的默认样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
