如何在懸停時使用CSS更改選擇選項的顏色？

Question

<select style="width:245px;"> 
    <option value="rseleccionar">Seleccione..</option> 
    <option value="bs">Bienes Separados</option> 
    <option value="bm">Bienes Mancomunados</option> 
</select> 

我想更改爲另一個默認的藍色。

Answer 1

造型select和option標籤非常有限。

這是因爲它們的顯示方式可能會根據瀏覽器/操作系統而改變。想想當你點擊手機上的選擇標籤時會發生什麼。您無法在桌面瀏覽器上按預期得到下拉列表。所以你不能風格的東西通用，因爲它不本地顯示保存無處不在。

造型可能性是：主要對select標籤，但在option非常有限。例如，您可以禁用選擇框的本土風格：

select { 
    appearance: none; 
    /* may need vendors prefixes. */ 
} 

其他的解決方案是： jQuery插件使用其他HTML標記，模擬選擇框：

• https://jqueryui.com/selectmenu/
• https://github.com/marcj/jquery-selectBox
• 而所有Google可能會用關鍵字「jQuery select box」返回給你:)

Answer 2

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

Answer 3

試試這個，希望能對大家的工作

<select class="hover_color" style="width:245px;"> 
    <option value="rseleccionar">Seleccione..</option> 
    <option value="bs">Bienes Separados</option> 
    <option value="bm">Bienes Mancomunados</option> 
</select> 

.hover_color:hover { background-color: red; border:1px solid red }