Chrome浏览器中<optgroup>的label默认未加粗的技术问题咨询

嘿，这个问题我之前也碰到过！本质是不同浏览器对表单元素的默认样式差异搞的鬼——Firefox和IE确实会默认给<optgroup>的label加上粗体，但Chrome没做这个默认处理。要统一跨浏览器的表现，只需要加几行简单的CSS就能搞定。

核心解决方案 #

直接给<optgroup>设置font-weight: bold，这样Chrome里的label会变成粗体，同时不会破坏Firefox/IE的原有表现（因为它们本来就是粗体，设置后还是保持一致）：

optgroup {
  font-weight: bold;
}

完整可运行示例 #

把CSS和你的HTML结合起来，就是这样：

<style>
optgroup {
  font-weight: bold;
}
</style>
<select>
  <optgroup label="Group 1">
    <option>Option 1.1</option>
  </optgroup>
  <optgroup label="Group 2">
    <option>Option 2.1</option>
    <option>Option 2.2</option>
  </optgroup>
  <optgroup label="Group 3" disabled>
    <option>Option 3.1</option>
    <option>Option 3.2</option>
    <option>Option 3.3</option>
  </optgroup>
</select>

额外优化：处理禁用状态的<optgroup> #

有些浏览器可能会给禁用的<optgroup>自动取消粗体并变灰，如果想让禁用组的label也保持粗体，可以再加一条规则：

optgroup:disabled {
  font-weight: bold;
  /* 可选：如果想保留禁用状态的灰色调，不用修改color属性，浏览器默认会处理 */
}

这样调整后，所有主流浏览器里的<optgroup>标签label都会统一显示为粗体啦。

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