How to strike optgroup label out

Question

I would like to strike the label of optgroup. It looks like text-decoration style property does not have any effect on optgroup label appearance. Sample code:

<select>
  <option value="">-- Select fruit-- </option>
  <optgroup label="Fruit" style="color: red; font-size: 16px; text-decoration: line-through;">
    <option value="apple">Apple</option>
    <option value="peach">Peach</option>
  </optgroup>
</select>

Changes of color, and font-size work, but text-decoration does not. Any ideas how I can achieve such text style? Thank you very much

Answer 1

See the below CSS selector and its styling:

optgroup[label="Fruit"] {
  color: red;
  text-decoration: line-through;
}

<select size="4">
  <option value="">-- Select fruit --</option>
  <optgroup label="Fruit">
    <option value="apple">Apple</option>
    <option value="peach">Peach</option>
  </optgroup>
</select>