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

Question

我正在尝试将 select 标记中第一个选项（业务类型）的颜色更改为灰色，使其看起来像文本字段的占位符文本。我尝试了几件没有用的东西。有什么方法可以简单地用 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>

Answer 1

这应该有效：

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

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

Answer 2

您只需添加以下内容即可完成 css,

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

Answer 3

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

#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>

Answer 4

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

Answer 5

在select标签中添加必填项并点赞

  <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;
  }

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

How to change the color of a placeholder option in a Select tag?

html

css

html-select

colors

placeholder