HTML 5選擇列表選項在chrome懸停時更改背景顏色

Question

嘗試了很多以更改懸停時select選項的背景顏色，但無法這樣做，請幫助我找到解決方法。

select.rangs option:hover {
 box-shadow: 0 0 10px 100px #ffea00 inset;}
option.rang:hover {
 background: #ffea00 !important;}

<select id="order" name="order" title="order" class="form-control form-login__input-field label-error rangs">
 <option class="rang" value="">Sort By</option>
 <option class="rang" value="popular">Most popular</option>
 <option class="rang" value="register_desc">Oldest First</option>
 <option class="rang" value="register_asc">Newest First</option>

我希望在chrome懸停時更改背景顏色

Answer 1

以下代碼將為您提供幫助。 運行代碼段。

 .rang:hover { background: #ffea00 !important;} 

 <select id="order" name="order" title="order" class="form-control form-login__input-field label-error rangs"> <option class="rang" value="">Sort By</option> <option class="rang" value="popular">Most popular</option> <option class="rang" value="register_desc">Oldest First</option> <option class="rang" value="register_asc">Newest First</option> </select> 

Answer 2

您不能更改<option>的background ，也不能在option元素內設置腳本或樣式。 無論文本，樣式或腳本是什么，它僅用於顯示選項元素內的文本。

option元素的主要屬性是value ，這就是為什么無需在<option>內的文本上添加CSS的原因

您只能在<select>上應用CSS：

select {
background: #ffea00;
}