css在某些<option>的</option>上选择下拉列表粗体

时间:2012-01-31 11:41:35

标签: css forms select option

在选择下拉列表中,我需要将某些项目设为“强/粗”。

我该怎么做?

我理想要求的例子:

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

5 个答案:

答案 0 :(得分:33)

你实际上不能。

最近的事物(您不能选择粗体项目)

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

哪个给你这个: enter image description here

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

您也可以构建自己的一个,但不会输入输入标记(您应该使用自己的输入)。

答案 1 :(得分:7)

您可以使用: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

找到有关此伪类的更多信息和浏览器支持

答案 2 :(得分:0)

在工作中使用CSS作为更快捷,更轻松的选择

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

答案 3 :(得分:-1)

这也有效(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>

答案 4 :(得分:-1)

你可以用jQuery做到这一点。

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

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