I am encountering an issue with a select component that has grouped options and a default option. The CSS styling is not being applied to the option without a group.
I would like to change the color of the hidden disabled option to match the placeholder. Is there a way to achieve this?
<select required>
<option hidden disabled selected> -- select -- </option>
<optgroup label="one">
<option > A </option>
<option > B </option>
<option > C </option>
<option > D </option>
</optgroup>
<optgroup label="two">
<option > E </option>
<option > F </option>
<option > G </option>
<option > H </option>
</optgroup>
</select>
option[disabled]{
color: red;
}<select required>
<option hidden disabled selected> -- select -- </option>
<optgroup label="one">
<option > A </option>
<option > B </option>
<option > C </option>
<option > D </option>
</optgroup>
<optgroup label="two">
<option > E </option>
<option > F </option>
<option > G </option>
<option > H </option>
</optgroup>
</select>Updated
The desired font color change should only occur initially. Upon the drop-down being changed, the default color should be applied again.
The hidden attribute is being used to serve as the placeholder within the option. Since placeholders cannot be used, I am attempting to replicate the behavior with this method.
Utilizing first-child does not resolve the issue as the options array is dynamically generated, leading to potential changes in position.