如何在悬停时更改选择选项的背景颜色答案

【问题标题】：How to change the background color of a select option on hover如何在悬停时更改选择选项的背景颜色
【发布时间】：2020-04-15 15:15:29
【问题描述】：

我想更改悬停时选择选项的背景颜色，我尝试了以下规则，但也没有用：

 select option {
    color: #fff;
  }
  select option:hover {
    color: #000;
    box-shadow: inset 20px 20px #fff;
  }

我必须应用哪些规则才能达到这种效果？ JS 是否识别选项元素中的悬停？

【问题讨论】：

标签： javascript html css frontend

【解决方案1】：

你可以试试这样的：

#select {
  width: 100px;
}

select:hover {
  color: #444645;
  background: green;
  /* hover on select */
}

select:focus>option:checked {
  background: yellow;
  /* selected */
}

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

如果你需要选项列表的作弊码，那么你可以试试这个：

#select {
  width: 100px;
}

select:hover {
  color: #444645;
  background: green;
  /* hover on select */
}

select option {
  color: #444645;
  background: red;
  /* hover on select */
}

option:hover {
  /*optional rendered */
  background-color: teal;
}

<select onfocus='this.size=9;' onblur='this.size=0;' onchange='this.size=1; this.blur();' id="select">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
  <option value="4">Four</option>
  <option value="5">Five</option>
  <option value="6">Six</option>
  <option value="7">Seven</option>
  <option value="8">Eight</option>
  <option value="9">Nine</option>
</select>

【讨论】：

有没有办法只改变选项的背景而不是整个选择元素？谢谢！
第二个 sn-p 会按照您的要求执行，如果您想查看更改，则替换为 option { color: #444645; background: gray; } 您可以看到该选项的背景将更改为 gray。
只想提供更多信息，select 的颜色从各自的操作系统渲染，因此更改其现有颜色总是有点技巧，我在上面所做的适用于该场景，我只是希望它至少有助于理解。

【解决方案2】：

不幸的是，您不能仅通过 css 更改所选选项的默认背景颜色和文本颜色。它们被您的浏览器放大，其中一些不想保留您的 css 样式。

这就是为什么你总是看到默认丑陋的蓝色背景和白色文本。

但我有一个技巧：

要更改背景颜色，您可以使用具有相同颜色的 linear-gradient，如下所示：

option:hover,
option:checked,
option:active,
option:focus {
    background: linear-gradient(#ffffd4, #ffffd4);
    position: relative;    
}

要更改文本颜色，您可以使用内容等于您的选项文本的伪类，如下所示：

select:focus > option:checked:before {
    color: #101010;
    position: absolute;
    content: attr(data-content);
}

数据内容可以直接在html中添加，也可以通过javascript/jQuery添加。

<option data-content="One">One</option>

您需要绝对位置来隐藏伪类下的选项文本。

option:hover,
option:checked,
option:active,
option:focus {
    background: linear-gradient(#ffffd4, #ffffd4);
    position: relative;
}

select:focus > option:checked:before {
    color: #A52A2A;
    position: absolute;
    content: attr(data-content);
}

select {
    width: 200px;
}

option {
    padding: 5px 10px;
}

option:hover {
    cursor: pointer;
}

<select size=5>
   <option data-content="One">One</option>
   <option data-content="Two">Two</option>
   <option data-content="Three">Three</option>
   <option data-content="Four">Four</option>
   <option data-content="Five">Five</option>
</select>

【讨论】：

【解决方案3】：

使用background 或background-color 更改元素的背景颜色。 color 用于文本颜色，而不是背景颜色。

div {
  background: #ffffff; /* equivalent to background-color */
}
div:hover {
  background: #000;
  color: #fff;
}

&lt;div&gt;Hover!&lt;/div&gt;

【讨论】：

你不能使用背景色设置背景图片，
OP想改变背景颜色。

【解决方案4】：

众所周知，该元素很难使用 CSS 高效地设置样式。您可以像任何元素一样影响某些方面。（来源：MDN）。为了在所有浏览器中产生一致的外观，我建议您使用像 Select2 这样的库，它在下拉列表下方附加了一个额外的 div，基本上覆盖了原始下拉列表。这样，它允许更灵活的样式，因为您实际上是在为新附加的 div 设置样式。

【讨论】：