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

Question

I am trying to change the color of the first option (Business Type) in a select tag to gray so it looks like placeholder text for a text field. I tried several things that did not work. Is there any way this could be done simply with HTML and 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

This should work:

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

Also check out: https://www.w3schools.com/css/css_attribute_selectors.asp

Answer 2

Target select to change the selected color style.
Then, target all options from this select to reset their inherited color.

 #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

Add required in select tag and do like

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

In 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

You can do it by just adding following css,

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