如何更改 Select 標簽中占位符選項的顏色？

Question

我正在嘗試將選擇標簽中第一個選項（業務類型）的顏色更改為灰色，使其看起來像文本字段的占位符文本。 我嘗試了幾件不起作用的事情。 有什么辦法可以簡單地用 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

目標選擇以更改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>

Answer 3

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

Answer 4

在選擇標簽中添加 required 並喜歡

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

Answer 5

你可以通過添加以下css來做到這一點，

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