如何覆蓋select元素的默認樣式多個

對於select元素多個，我想刪除所選選項的背景顏色，因爲我在每個選項前用框指示選擇。目的是給選擇多個元素提供複選框樣式。如何覆蓋select元素的默認樣式多個

爲什麼使用select multiple？我在一個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>

來源

2016-11-16 aUXcoder

我不認爲有一種方法......最簡單的事情做，如果你確實需要這是使用下拉菜單類型的東西，並使用JS來處理。 – TricksfortheWeb

我認爲你正在尋找這個

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

來源

2016-11-16 18:02:01

不起作用：https：//jsfiddle.net/ppr4peeq/1/ – TricksfortheWeb

它似乎是一種內部瀏覽器風格。我已經嘗試通過給出選擇和選項Id來更具體，它仍然不會覆蓋...。 –

我已經覆蓋了背景顏色：https://jsfiddle.net/r0958y30/無法獲取它將字體顏色留爲黑色。 –

如何覆蓋select元素的默認樣式多個

回答

相關問題