HTML 选择中的部分粗体文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4951623/
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
Partially Bold Text in an HTML select
提问by Ben
I'm not sure if this is even possible, but I have a case where I'd like to bold part(not all) of the text within an option of an HTML select tag.
我不确定这是否可行，但我有一个案例，我想在 HTML 选择标记的选项中加粗部分（不是全部）文本。
I tried using b tags, as well as strong tags, with no luck (on Chrome). CSS might work, but since it works at the element level, I'm not sure how to go about it that way.
我尝试使用 b 标签以及强标签，但没有运气（在 Chrome 上）。CSS 可能会起作用，但由于它在元素级别起作用，我不确定如何以这种方式进行。
Is there any way to do this?
有没有办法做到这一点？
回答by SLaks
No; it's not possible.
不; 这是不可能的。
Instead, you can make a fake dropdown list using Javascript.
相反，您可以使用 Javascript 创建一个虚假的下拉列表。
回答by Pritesh
since chrome doesn't allow bold font on option tag . you can use text-shadow property like
因为 chrome 不允许选项标签上的粗体字体。您可以使用 text-shadow 属性，如
text-shadow: 0px 0px 0px black;
文本阴影：0px 0px 0px 黑色；
it will give same appearance of bold and work on all the browsers
它将给出相同的粗体外观并在所有浏览器上工作
回答by Moses
No, this is not possible. You have two options here:
不，这是不可能的。您在这里有两个选择：
1) Use the <optgroup>to create a descriptive header for what you're doing (unlikely this will help).
1) 使用<optgroup>为您正在做的事情创建一个描述性标题（这不太可能有帮助）。
2) Simulate a drop-down menu by using JavaScript. I'm not sure, but I think jQuery UI might have a drop-down menu script.
2) 使用 JavaScript 模拟下拉菜单。我不确定，但我认为 jQuery UI 可能有一个下拉菜单脚本。
回答by Guru110
I think its too late but this thing worked for me. Apply the property 'font-weight: bolder' to the option tag to make text within it bold without using any html tags.
我认为为时已晚，但这件事对我有用。将属性 'font-weight: bolder' 应用于选项标签，以在不使用任何 html 标签的情况下将其中的文本设为粗体。
<option value="optionValue" class="bold-option">
.bold-option{font-weight: bolder;}
回答by Zak Noel
Simple solution:
简单的解决方案：
<select>
<option>Simple</option>
<option class='bolden'>Bold</option>
<option>Simple</option>
</select>
<style>
.bolden{font-family:"Arial Black"}
</style>
Example: https://jsfiddle.net/hnzhbz69/
回答by SuperNova
Bold a nth option in select.
在选择中加粗第 n 个选项。
There is no way to do this in css. If still differentiation between options is required, use color, and background.
在 css 中没有办法做到这一点。如果仍然需要区分选项，请使用颜色和背景。
.diff-option {
color : grey;
}
.other-options{
color:white
background: ...
}
回答by Jaykumar Gondaliya
using CSS yes it's possible
使用 CSS 是的，这是可能的
option[value='4']{
font-weight:bold;
}
/*
Here you can used also :nth of the options that you need to apply specific css like
option:nth-child(1), option:nth-child(4) {
font-weight:bold;
}
*/<select>
<option value='1'>first</option>
<option value='2'>Second</option>
<option value='3'>Third</option>
<option value='4'>Fourth</option>
<option value='5'>Fifth</option>
</select>回答by Mystic
Well, you can use the <strong>or <b>in firefox, but it won't work in Chrome or in IE (not cheked any other)
好吧，您可以在 firefox 中使用<strong>或<b>，但它在 Chrome 或 IE 中不起作用（没有其他任何检查）
回答by nyanev
Try to wrap the text with <span id="wrap">Some text</span>in css do this
#wrap {font-weight: bold}
尝试用<span id="wrap">Some text</span>css包裹文本，这样做
#wrap {font-weight: bold}
