0

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

Irina Shirinsky
  • 11
  • 1

1 Answers1

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>
David Wolf
  • 1,400
  • 1
  • 9
  • 18
  • Thanks for your reply. Unfortunately, this code works only if the dropdown box is expanded, only if "size" is specified, furthermore, the size should be > 1. If you set "size="2"", it works, if you set "size="1"" it does not. So, it does solve my problem. – Irina Shirinsky Feb 08 '22 at 22:25
  • Any way to make the `optgroup` multiline? – Amit Shah Aug 01 '22 at 15:34
  • @AmitShah please see https://stackoverflow.com/q/1165358/13765033 and https://stackoverflow.com/q/2864238/13765033 – David Wolf Aug 02 '22 at 06:16