如何更改选择中悬停选项的背景颜色和文本？ [复制]答案

【问题标题】：How to change background color and text of hover options in select? [duplicate]如何更改选择中悬停选项的背景颜色和文本？ [复制]
【发布时间】：2021-02-13 02:43:41
【问题描述】：

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

【问题讨论】：

Duplicate of How to style the option of an html "select" element?。

标签： html css select colors hover

【解决方案1】：

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

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

.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>

【讨论】：

真的很喜欢 onfocus='this.size=3;' onblur='this.size=0;' onchange='this.size=1; this.blur();' 的使用，加入了一些 :focus absolutes 和 hovers，它在 td 中实现了非常无缝的选择 :D

【解决方案2】：

你可以试试这个css代码。

rgba color 关于不透明度的第四个值。

<style>
.yourOptionName :hover {background:rgba(0, 0, 0, .4) ; color:red}
</style>

【讨论】：