为那些启用的选择选项设置粗体字体

Question

我有一个 Select ，里面有一些 Option 。如何font-weight: bold只为那些已启用的选项做准备？

这是示例代码：

<select>
  <optgroup label="group1">
    <option value="2016" disabled>2016</option>
    <option value="2017" disabled>2017</option>
    <option value="2018" selected="selected">2018</option>
    <option value="2019">2019</option>
  </optgroup>
  <optgroup label="group2">
    <option value="2020" disabled>2020</option>
    <option value="2021">2021</option>
  </optgroup>
</select>

2016, 2017, 2020 为正常字体，多为灰色（或特殊色码），2018,2019,2021 为粗体。怎么做？

注意：我不会为每个选项添加内联代码。

谢谢。

Answer 1

使用:checked选择器得到最广泛的支持。这适用于复选框和选择列表。您还可以选择和样式:disabled

但是，请注意，某些浏览器不支持浏览器选择组件中的大量字体更改。因此，颜色、重量等可能会或可能不会起作用，具体取决于查看位置。这意味着您不能指望这一点来获得重要的界面/用户反馈。

option { 
  font-weight: bold;
}
option:checked { 
  color: red;
}
option:disabled { 
  color: #dddddd;
  font-weight: normal;
}

<!-- this doesn't work in Chrome when wrapped in a Select -->
<select>
   <optgroup label="group1">
     <option value="2016" disabled>2016</option>
     <option value="2017" disabled>2017</option>
     <option value="2018" selected="selected">2018</option>
     <option value="2019">2019</option>
   </optgroup>
   <optgroup label="group2">
     <option value="2020" disabled>2020</option>
   </optgroup>
</select>

<!-- this works in Chrome -->
<optgroup label="group1">
  <option value="2016" disabled>2016</option>
  <option value="2017" disabled>2017</option>
  <option value="2018" selected="selected">2018</option>
  <option value="2019">2019</option>
</optgroup>
<optgroup label="group2">
  <option value="2020" disabled>2020</option>
</optgroup>