HTML select box customizing CSS for disabled selected-CodePudding

how can I customize a select box to show "disabled selected" value customized on page load/refresh, not only after option shown/selected.

<select>
  <option>Poland</option>
  <option>Germany</option>
  <option style="color:red" disabled selected>Choose</option>
</select>

I tried many CSS solutions, but non works on page loading / refresh. I also don't want to rebuild the whole select box by hiding the original. There is any workaround for it?

CodePudding user response：

If you want to do in simple way but not the better you can do something like this

option{
  color: black;
}

<select style="color: red">
  <option>Poland</option>
  <option>Germany</option>
  <option disabled selected>Choose</option>

CodePudding user response：

You can hide the option using the 'hidden' attribute. The 'Choose' option will be shown as the default/selected option on page load, but it will be hidden in the dropdown options and will not be shown/selectable from the options once the user selects any of the options .

<select>
  <option>Poland</option>
  <option>Germany</option>
  <option hidden selected>Choose</option>
</select>

Output: .