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

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?

user_9821883 · Answer

This should work:

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

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

user_6162405 · Answer

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

user_9402399 · Answer

Add required in select tag and do like

user_9557607 · Answer

You can do it by just adding following css,

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

user_9818704 · Answer

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

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

5 Answers