0
複数の要素を選択する場合は、選択したオプションの背景色を削除する必要があります。 意図は、複数の要素を選択するためのチェックボックススタイルを与えます。select要素の倍数のデフォルトスタイルをオーバーライドする方法
なぜ複数の選択を使用しますか？ 私はAngular Appで作業しています。チェックボックスのコレクションとして選択した複数のスタイルを有効にする必要があります。これを行うと、角度検証、ngオプションなどを使用できるようになります。入力タイプチェックボックスを使用して同じインターフェースを構築できますが、これは同じ機能に対して多くのコードを意味します。
.form-group{
margin: 10px 0 0 20px;
}
select[multiple]{
\t -webkit-appearance: none;
\t -moz-appearance: none;
\t appearance: none;
\t border: none;
\t overflow: hidden;
\t 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を使ってください。 – TricksfortheWeb