更改默认（禁用）选定选项的背景颜色答案

【问题标题】：Change background color of default (disabled) selected option更改默认（禁用）选定选项的背景颜色
【发布时间】：2020-10-24 07:44:04
【问题描述】：

一般信息
尝试制作一个自定义设计的选择列表，其中第一个选项是默认选项，不应选择（禁用）。

问题
我可以很好地更改可用选项的背景颜色。但是，默认禁用选项在下拉菜单中具有灰色背景。将鼠标悬停在其上并再次离开后，颜色将变为应有的颜色。

这似乎是使用选择和禁用选项组合的特定问题。如果您删除 disabled 和/或 selected 属性，问题就消失了。

我该如何解决这个问题？

我尝试自己解决问题的方法
我尝试根据这个问题更改选项的悬停颜色：Change Select List Option background colour on hover

我认为这可能与此有关。然而，那个问题的答案甚至没有用。

我的代码：

body {
  background: #41608c;
}
select {
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 300;
  font-size: 16px;
  width: 300px;
  height: 64px;
  background: rgba(0, 0, 0, 0.4);
  border: none;
  margin-top: 1px;
  color: rgba(255, 255, 255, 1);
  appearance: none;
}
select option {
  background: rgba(46, 61, 87, 1);
}

<body>  
  <select>
    <option selected="selected" disabled>Default value</option>
    <option>Value 1</option>
    <option>Value 2</option>
  </select>
</body>

【问题讨论】：

你不应该在同一个选项上选择和禁用。如果您真的想阻止用户再次使用默认选项，您可以在更改时禁用它。这是一个示例：jsfiddle.net/1nfyb9wt
@JensIngels 谢谢。我知道如何解决这个问题。我什至可以用标签来解决它。我只是想知道这是怎么回事。某些东西正在为禁用的选项提供默认背景颜色。我最好的猜测是这是由操作系统完成的。但如果这是真的，那么为什么在悬停选项后它会“修复”自己？我开始怀疑这是否实际上是浏览器与操作系统的错误。
使用标签可能是你最好的选择。

标签： html css

【解决方案1】：

要在不编写脚本的情况下解决此问题，您不能使用 disabled 作为默认选项。改用隐藏：

body {
  background: #41608c;
}
select {
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 300;
  font-size: 16px;
  width: 300px;
  height: 64px;
  background: rgba(0, 0, 0, 0.4);
  border: none;
  margin-top: 1px;
  color: rgba(255, 255, 255, 1);
  appearance: none;
}
select option {
  background: rgba(46, 61, 87, 1);
}

<body>  
  <select>
    <option selected hidden>Default value</option>
    <option>Value 1</option>
    <option>Value 2</option>
  </select>
</body>

归功于描述 (Michał Mielec post)

为什么不禁用？

当您将禁用属性与重置值一起使用时，不会重置为原始占位符。而是浏览器选择第一个未禁用的选项，这可能会导致用户错误。

如果您仍然希望默认选项出现在选择菜单中，您可以通过为其提供禁用标签选项来进一步构建：

body {
  background: #41608c;
}
select {
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 300;
  font-size: 16px;
  width: 300px;
  height: 64px;
  background: rgba(0, 0, 0, 0.4);
  border: none;
  margin-top: 1px;
  color: rgba(255, 255, 255, 1);
  appearance: none;
}
select option {
  background: rgba(46, 61, 87, 1);
}

<body>  
  <select>
    <option selected hidden>Default value</option>
    <option disabled>Default value</option>
    <option>Value 1</option>
    <option>Value 2</option>
  </select>
</body>

【讨论】：

谢谢，我会赞成这个，因为它是解决问题的简单解决方案。但这不是问题的答案，所以现在我将保持开放状态。
没问题，老实说，这个特定问题的确切答案是将系统用于它不是为它设计的用途。如规则所述，您不能在同一选项上同时使用 disabled 和 selected 。如果您试图以这种方式强制执行，您很可能会在生产中遇到错误。
这里有更多关于如何进一步自定义您的选择标签的信息。您可以使用 required 属性来防止用户不选择选项。遗憾的是，与输入不同的是，没有标准的验证事件会为您显示无效消息。您确实可以访问生成它的布尔值。这是一个例子：jsfiddle.net/a9o8edb1祝你好运
好的，将您的答案标记为已回答，因为您已经投入了足够多的工作，而且公平地说，我的问题应该改写不同的措辞，以获得我正在寻找的答案。再次感谢，非常感谢！