如何更改选择中悬停选项的背景颜色和文本?

2022-01-22 00:00:00 colors select hover html css

我想在悬停时将此蓝色更改为透明，并将文本颜色更改为红色

I want to change this blue to transparent and the text color to red on hover

推荐答案

这是一个工作示例.- 单个选择选项无法设置样式.

Here is a working example. - A single select option cannot be styled.

我们在这里所做的是使用在点击时触发的 size 将选择更改为多选.转换为多选后，您可以设置选项悬停样式.

What we are doing here is changing the select to multiple selects using size which is triggered onclick. Once converted to a multiple select you can then style the option hover.

.blue:hover {background: blue;}

.green:hover {background: green;}

.red:hover {background: red;}

<select onfocus='this.size=3;' onblur='this.size=0;' 
            onchange='this.size=1; this.blur();'>
<option class="blue" >blue background</option>
<option class="green" >green background</option>
<option class="red" >red background</option>
</select>

相关文章