Question

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

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

使用选择和禁用选项的组合似乎是一个特定的问题。如果删除禁用的和/或选定的属性，则问题消失了。

我该如何解决这个问题？

我为解决该问题所做的尝试
我尝试根据以下问题更改选项的悬停颜色：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>

Answer 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）

为什么不被禁用？

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

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

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>

更改默认（禁用）所选选项的背景颜色

1 个答案: