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

【问题标题】：Set different font-weights for different option values of select menu?为选择菜单的不同选项值设置不同的字体粗细？
【发布时间】：2019-06-24 02:14:18
【问题描述】：

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

我们的目标是为同一个选择菜单的不同选项设置不同的字体粗细。我们只需要支持现代浏览器即可。

此代码不起作用，尽管 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。没有插件。

【问题讨论】：

您的代码实际上确实设置了<select> 下拉列表的<option> 字体权重。如果您使用更粗的字体粗细，这会更加明显。您是否还想为选中的<option>设置样式？
我已经试过你的代码 sn-p 并且它工作正常。正如@ObsidianAge 所说，差别太微妙了
您需要确保您使用的字体具有 200 和 300 粗细的变体。否则它们将显示相同。
@ObsidianAge 感谢您的帮助！是的，为选定的选项设置样式是否需要特别的东西？
@ObsidianAge 尝试了下面 gavgrif 的答案，这是输出：imgur.com/a/Jc9Votz。样式看起来都一样？

标签： html css

【解决方案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>

【讨论】：

谢谢！是否有理由将样式移至 CSS？我们需要根据选择的不同字体系列动态更改字体权重。
运行您的代码 sn-p 显示以下样式：imgur.com/a/Jc9Votz。他们看起来都一样？你看到了什么？再次感谢您的帮助！
可能是浏览器的问题？ - 我在 chrome 上，查看每个选项中的字体粗细变化。 - 将样式移到 css 块的好处是简化代码库，将结构与样式分离，允许正确的级联，更容易编辑并提高代码的可读性。 - 你也应该对你的 js 做同样的事情 - 将所有函数代码移动到外部 js 文件并将其调用到页面中。比在 linejs 中做的更好 - 例如 ... onclick="myFunction()"... 它只是更好的代码结构，可以将结构、样式和功能相互分离，并且永远不会跨越流。
截图也是在Chrome上截的？
我无法在评论中添加屏幕热 - 所以将其添加到我的答案中 - 正如您所看到的 A 之间的重量差异很小，但 C 的差异更大

【解决方案2】：

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

<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>

【讨论】：