Question

这些问题相似但不相同或非常过时：

目标是使用不同的字体粗细来样式化同一选择菜单的不同选项。我们只需要支持现代浏览器即可。

即使在Stack Overflow和其他地方的答案表明它应该在现代浏览器（如Chrome）中使用，此代码也无法正常工作。

这是使用@gravgrif的答案时的外观示例，其中显示了所有样式相同的选项：

另一种无济于事的选择是将option中的每个optgroup捆绑在一起，并设置optgroup的样式。

<select class="weightMenu" title="Bold options available">
  <option value="200" style="font-weight:200">B</option>
  <option value="300" style="font-weight:300">B</option>
</select>

目标是使用本机HTML和CSS。没有插件。

Answer 1

尽管您的代码可以正常工作-您应该将样式移至CSS而不是内联样式。注意-我使字体粗细更大，以更好地显示差异。

.weightMenu option:nth-child(1) {
  font-weight:400;
}

.weightMenu option:nth-child(2) {
  font-weight:700;
}

.weightMenu option:nth-child(3) {
  font-weight:900;
}

<select class="weightMenu" title="Bold options available">
  <option value="200">A</option>
  <option value="300">B</option>
  <option value="400">C</option>
</select>

Answer 2

使用较大的字体粗细可以解决此问题。这是因为较低的font-weight值看起来相同。

<select class="weightMenu" title="Bold options available">
  <option value="400" style="font-weight:400">A</option>
  <option value="700" style="font-weight:700">B</option>
  <option value="800" style="font-weight:800">B</option>
</select>

为选择菜单的不同选项值设置不同的字体粗细？

2 个答案: