当选项标签处于悬停状态时，我如何改变它的颜色(CSS)？

wgmfuz8q 于 2023-02-26 发布在其他

关注(0)|答案(1)|浏览(256)

我正在尝试制作一个不同的<select>标记，但<option>标记出现问题。
当我将鼠标悬停在<option>标记上时，背景不起作用。
代码：

<select>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

select > option{
  background:red;
}

我尝试了此代码，但不工作：

option:hover {
  background:red;
}
option:checked {
  background:red;
}

我想知道我是否可以设置<option>标签的背景颜色，当我悬停在他们上面。我只想要CSS解决方案，我不想要任何JavaScript解决方案。

1条答案

下面是如何在CSS中改变选项标签悬停时的颜色。下面的代码是一个红色背景和白色文本的示例。这段代码将在select元素悬停时改变select元素中悬停选项的背景（红色）和文本颜色（白色）。

select:hover option:hover {
    background-color: red;
    color: white;
}

<select size = "3">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    </select>

select元素的size属性应该大于1。默认值为1。因此，请将属性size添加到select中，例如
此外，某些浏览器可能只允许选项元素的有限样式，如字体颜色和背景颜色