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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/9078927/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-30 02:47:19  来源:igfitidea点击:

css select dropdown bold on some <option>'s

cssformsselectoption

提问by user991830

On a select dropdown, I need to make certain items 'strong/bold'.

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

How can I do this?

我怎样才能做到这一点?

Example of what I ideally require:

我理想情况下需要的示例:

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

采纳答案by Sotiris

you could use :nth-child(N)

你可以用 :nth-child(N)

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

Demo:http://jsfiddle.net/Sotiris/sqshN/

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

Find more info and browser support for this pseudo-class at http://reference.sitepoint.com/css/pseudoclass-nthchild

http://reference.sitepoint.com/css/pseudoclass-nthchild 上查找有关此伪类的更多信息和浏览器支持

回答by Royi Namir

You actually can't.

你实际上不能。

The closestthing (you can't choose a bold item)

最近的事情(你不能选择一个大胆的项目)

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

Which gives you this: enter image description here

这给了你这个: 在此处输入图片说明

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

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

You can also build one of your own but it won't be input an input tag (you should use inputs of your own).

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

回答by Ben Davis

Using css in the works as a quicker, easier alternative

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

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

回答by Mani

This also works (Firefox 50 and Chrome 55). Items 3 and 5 are shown in bold

这也适用(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>

回答by Evan Lalo

You could do it with jQuery.

你可以用jQuery来做。

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

You'd have to add some logic to determine which options to bold, obviously.

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