css select dropdown bold on some <option>'s

Posted 2023-03-11

【中文标题】css select dropdown bold on some <option>\'s

【英文标题】：css select dropdown bold on some <option>'scss select dropdown bold on some <option>'s

【发布时间】：2012-02-23 03:15:36

【问题描述】：

在选择下拉菜单中，我需要将某些项目设置为“粗体/粗体”。

我该怎么做？

理想情况下的示例：

<option value="#"><strong>Andorra</strong></option> 
<option value="#">--Grandvalira</option> 
<option value="#">--Vallnord</option> 
<option value="#"><strong>Austria</strong></option> 
<option value="#">--Amadé</option> 
<option value="#">--Bad Kleinkirchheim</option> 
<option value="#">--Mallnitz</option>

【问题讨论】：

选择 optgoups 或构建一个“假”的基于 js/css 的下拉菜单 - 也可以复制到：***.com/questions/7208786/…

【参考方案1】：

在作品中使用 css 作为一种更快、更简单的替代方法

<option value="value" style="font-weight: bold;">SELECT ME</option>

【参考方案2】：

这也有效（Firefox 50 和 Chrome 55）。第 3 项和第 5 项以粗体显示

   <style>
    .bld font-weight:bold;
   </style>
   <select>
    <option value = "1">Kanakangi
    <option value = "2">Ratnangi
    <option class = "bld" value = "8">Hanumatthodi
    <option value = "9">Dhenuka
    <option class = "bld" value = "15">Mayamalavagowla
    <option value = "16">Chakravaaham
  </select>

【参考方案3】：

你可以用 jQuery 做到这一点。

  $('#Your select').append($("<option></option>").attr.css("font-weight" , "bold").html("Bold Text"));

显然，您必须添加一些逻辑来确定哪些选项要加粗。

【参考方案4】：

其实你做不到。

最接近的东西（你不能选择粗体）

 <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>

这给了你这个：

http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_optgroup

您也可以自己构建一个，但不会输入输入标签（您应该使用自己的输入）。

【参考方案5】：

你可以使用:nth-child(N)

option:nth-child(1), option:nth-child(4) 
    font-weight:bold;

演示： http://jsfiddle.net/Sotiris/sqshN/

在http://reference.sitepoint.com/css/pseudoclass-nthchild找到更多信息和浏览器支持这个伪类

【讨论】：

感谢...它很棒，但在 Chrome 中不起作用（在 Firefox 中很好）

@user991830 不支持 option 元素的粗体，但伪类有效。检查这个改变颜色的例子jsfiddle.net/sqshN/1

[Windows] Chrome 从未允许下拉样式，因为它使用操作系统 API。我记得在尝试实现类似目标时出现了类似的差异。

这有一个 Chromium 问题。我添加了一条评论，也许更多的选票会让某人完成这项工作：code.google.com/p/chromium/issues/…

你的回答应该至少提到这不是一个跨浏览器的解决方案。