如何更改多個選擇下拉菜單的默認背景

Question

加載頁面時，它是選項列表中的默認顏色（在Chrome中為＃c8c8c8，在faerfoks中為藍色）。 如何實現/透明化？ 我嘗試了偽類和js的不同組合，但都是徒勞的。 當您單擊一個選項時，它將起作用。 例如 ：

 <select multiple> <option selected>1111111</option> <option selected>222222222</option> <option selected>33333333</option> <option selected>44444444</option> </select> 

我沒有訪問此列表形成的服務器部分。

Answer 1

您正在加載具有四個選定元素的頁面，只需刪除不希望頁面以灰色加載的元素上的selected屬性。

 select option { background-color: red; } select option[selected] { background-color: blue; } 

 <select multiple> <option>1111111</option> <option>222222222</option> <option selected>33333333</option> <option>44444444</option> </select> 

Answer 2

只是刪除selected的那些您不希望頁面在加載的灰色屬性。

Answer 3

選項突出顯示為灰色而不是藍色的原因是它們不清晰。 當您單擊某個元素時，該元素將重點關注，因此您可以根據需要將選項更改為藍色。 （如果您隨后從選擇中單擊離開，它們將變回灰色）。 使用autofocus屬性可以autofocus聚焦於此元素。

 <select multiple autofocus="autofocus"> <option selected>1111111</option> <option selected>222222222</option> <option selected>33333333</option> <option selected>44444444</option> </select> 

如果要更改默認配色方案，請使用css focus選擇器

select:focus {/*Add styles for in focus*/}
select:not(:focus) {/*Add styles for not in focus*/}

您正在選擇四個選項，所以如果您只想選擇一個，請參閱@KyleDumovic的答案

祝好運！