更改選擇列表懸停時的選項背景顏色

HTML：

<select id="select"> 
    <option value="1">One</option> 
    <option value="2">Two</option> 
    <option value="3">Three</option> 
</select>

我已經試過option:hover { background-color: red; }，但它是沒有用的。有人知道怎麼做這個嗎？

來源

2012-05-07 Gopesh

在某些瀏覽器中有可能，而在其他瀏覽器中則不可以。通常，表單元素由操作系統而不是瀏覽器呈現，所以CSS並不總是（甚至「很少」）應用。 –

哪些瀏覽器有可能？ – vipin8169

選擇/選項元素由操作系統呈現，而不是HTML。您無法更改這些元素的樣式。

來源

2013-03-26 01:25:15 Priyesh

+26

這是一個很老的問題。如果你現在要添加一個答案，至少要詳細說明或支持它的參考... –

這可以通過實現一個嵌入框陰影來完成。如：

select.decorated option:hover { 
    box-shadow: 0 0 10px 100px #1882A8 inset; 
}

這裏，.decorated是分配給選擇框的類。

希望你明白了。

來源

2013-11-07 11:19:06 user2964504

+11

+1好主意！但是'option：checked'比'option：hover'更好。不過，兩者似乎只適用於Firefox。 – Oriol

有沒有什麼可以在Chrome上運行？ – GumZ

我的方法是製作一個完全不同的元素，其行爲類似於「select」元素。基本上是一個列表裏面的列表。 – Diogo

-5

這是你需要什麼，孩子組合子：

select>option:hover 
    { 
     color: #1B517E; 
     cursor: pointer; 
    }

試試吧，可以完美運行。

這裏的參考：http://www.w3schools.com/css/css_combinators.asp

來源

2014-04-08 02:03:36 Dani

在Firefox中，默認樣式是'option：checked {background-color：-moz-html-cellhighlight！important; color：-moz-html-cellhighlighttext！important; }'。然後，問題是，即使您使用！important，您也無法重寫內部重要屬性。 – Oriol

在Chrome中無法使用。 – Lev

-2

我意識到這是一個老問題，但我最近遇到這方面的需求來了，和使用jQuery和CSS以下解決方案上來：

jQuery('select[name*="lstDestinations"] option').hover(
     function() { 
      jQuery(this).addClass('highlight'); 
     }, function() { 
      jQuery(this).removeClass('highlight'); 
     } 
    );

和CSS ：

.highlight { 
    background-color:#333; 
    cursor:pointer; 
}

也許這可以幫助別人。

來源

2014-12-24 15:56:59 Toasterdroid

這不起作用，只是因爲背景色_gets被操作系統覆蓋。這相當於只使用'option：hover'。不過，如果我將鼠標懸停在選項上時開始使用鍵盤，則腳本會中斷，因此它不健壯。 – doppelgreener

實施插圖框陰影CSS工作在Firefox上：

select option:checked, 
select option:hover { 
    box-shadow: 0 0 10px 100px #000 inset; 
}

經過選擇項工作在Chrome：

select:focus > option:checked { 
    background: #000 !important; 
}

來源

2015-10-20 09:38:05

它不適用於Chrome瀏覽器 – deemi

在FF也CSS過濾器工作正常。例如。色相旋轉：

option { 
    filter: hue-rotate(90deg); 
}

https://jsfiddle.net/w3a740jq/4/

來源

2015-10-31 00:39:05 mat3e

它不適用於Chrome瀏覽器 – deemi

的問題是，即使JavaScript並沒有看到被徘徊在option元素。這僅僅是（至少快任何時候），只用CSS把重點放在它如何不會被解決：

window.onmouseover = function(e) 
{ 
console.log(e.target.nodeName); 
}

來解決這個問題（除了等待千年的瀏覽器廠商的唯一方式要修復錯誤，更不用說折磨你正在嘗試做什麼的錯誤）就是用JavaScript自己的HTML/XML替換掉下拉菜單。這可能涉及使用元素替換select元素和使用元素li元素。

來源

2018-01-22 05:48:58 John

更改選擇列表懸停時的選項背景顏色

回答

相關問題