如何更改 Select 标签中占位符选项的颜色？答案

【问题标题】：How to change the color of a placeholder option in a Select tag?如何更改 Select 标签中占位符选项的颜色？
【发布时间】：2019-02-21 10:06:14
【问题描述】：

我正在尝试将选择标记中的第一个选项（业务类型）的颜色更改为灰色，使其看起来像文本字段的占位符文本。我尝试了几件不起作用的事情。有什么方法可以简单地使用 HTML 和 CSS 来完成？

    <select id="businesstype">
        <option value="" disabled selected hidden>Business Type</option>
        <option value="">Restaurant</option>
        <option value="">Hotel</option>
        <option value="">Café</option>
        <option value="">Shop</option>
        <option value="">Services Agency</option>
        <option value="">NGO</option>
        <option value="">Institution</option>
    </select>

【问题讨论】：

How to change select box option background color?的可能重复

标签： html css colors html-select placeholder

【解决方案1】：

这应该可行：

#businesstype div[disabled] {
    opacity: 0.5;
}

另请查看：https://www.w3schools.com/css/css_attribute_selectors.asp

【讨论】：

【解决方案2】：

option:disabled {
    color: #000;
    font-weight: bold;
}

【讨论】：

【解决方案3】：

在选择标签中添加所需并做喜欢

  <select class="form-control form-item__element--select" required>
                      <option  disabled value="">Business Type*</option>
                       <option value="">Restaurant</option>
                       <option value="">Hotel</option>
                       <option value="">Café</option>

在 CSS 中

.form-item__element--select [disabled] {
  color: #DEDEDE;
  font-weight: 600;
  font-size: 16px;
   }
.form-item__element--select:invalid {
   color: #DEDEDE;
   font-weight: 600;
   font-size: 16px;
  }

【讨论】：

【解决方案4】：

目标选择更改selected颜色样式。
然后，定位此选择中的所有选项以重置其继承的颜色。

#businesstype {
  color: gray;
}

#businesstype option {
  color: black;
}

<select id="businesstype">
  <option value="" disabled selected hidden>Business Type</option>
  <option value="">Restaurant</option>
  <option value="">Hotel</option>
  <option value="">Café</option>
  <option value="">Shop</option>
  <option value="">Services Agency</option>
  <option value="">NGO</option>
  <option value="">Institution</option>
</select>

【讨论】：

【解决方案5】：

你可以通过添加以下css来做到这一点，

#businesstype option[disabled]:first-child {
    color: gray;
}

【讨论】：

这不是只有在需要禁用的选项是第一个选项时才有效吗？
这不起作用，因为disabled 选项也被隐藏了。