如何为optgroup标签的label文本设置删除线样式

optgroup的标签文本是浏览器原生渲染的内置表单组件部分，不属于开放样式定制的普通DOM节点。目前主流浏览器仅支持对optgroup设置color、font-size、font-family这类基础字体、颜色属性，不支持text-decoration相关属性的渲染，这是浏览器原生实现的限制，不是写法错误。

• 方案1：使用Unicode带删除线的字符替换label文本（兼容性最优）
  不需要额外写CSS，直接将label的普通文本转换为叠加了U+0336组合删除线字符的特殊文本即可，所有浏览器都能正常显示删除线效果。示例代码：

<select>
  <option value="">-- Select fruit-- </option>
  <!-- 直接将label值替换为带删除线的Unicode文本：F̶r̶u̶i̶t̶ -->
  <optgroup label="F̶r̶u̶i̶t̶" style="color: red; font-size: 16px;">
    <option value="apple">Apple</option>
    <option value="peach">Peach</option>
  </optgroup>
</select>

注意：该方案生成的删除线文本属于特殊字符，用户复制选项文本时会连带删除线控制符一起复制，对文本复制有要求的场景不适用。

• 方案2：自定义下拉组件替代原生select（灵活度最高）
  如果需要更自由的样式控制，可以放弃原生<select>控件，用普通div、列表元素模拟下拉菜单的交互和结构。这时候分组标题就是普通DOM元素，可以任意设置text-decoration: line-through以及其他所有CSS样式，还可以扩展图标、自定义布局等原生控件不支持的效果。缺点是需要自行实现下拉展开/收起、选项选中、键盘无障碍适配等逻辑，开发成本更高。

注意：不要尝试通过::before、::after伪元素给optgroup追加样式或内容，目前所有主流浏览器都不支持optgroup元素上的伪元素渲染，相关代码不会生效。

内容的提问来源于stack exchange，提问作者Irina Shirinsky