blocks|key|3204587|text|不，这是不可能的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3204588|相反，你可以使用Javascript制作一个假的下拉列表。|3204589|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

<p>No; it's not possible.</p>

<p>Instead, you can make a fake dropdown list using Javascript.</p>


blocks|key|2991048|text|因为chrome不允许在option标签上使用粗体。您可以使用文本阴影属性，如|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2991049|文本-阴影:+0px+0px+0px黑色；|2991050|它将给出相同的粗体外观，并在所有浏览器上工作|2991051|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

<p>since chrome doesn't allow bold font on option tag . you can use text-shadow property like</p>

<p>text-shadow: 0px 0px 0px black;</p>

<p>it will give same appearance of bold and work on all the browsers</p>


blocks|key|3204631|text|不，这不可能。这里有两个选项：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3204632|1)使用<optgroup>为您正在做的事情创建一个描述性标头(这不太可能有帮助)。|offset|length|style|CODE|3204633|2)使用JavaScript模拟下拉菜单。我不确定，但我认为jQuery+UI可能有一个下拉菜单脚本。|3204634|entityMap^0|0|4|A|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@$D|N|E|O|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|P|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|K|$]]

<p>No, this is not possible. You have two options here:</p>

<p>1) Use the <code>&lt;optgroup&gt;</code> to create a descriptive header for what you're doing (unlikely this will help).</p>

<p>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.</p>


blocks|key|280686|text|简单的解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|280687|<select>
++<option>Simple</option>
++<option+class='bolden'>Bold</option>
++<option>Simple</option>
</select>
<style>
++.bolden{font-family:"Arial+Black"}
</style>|code-block|syntax|javascript|280688|示例：https://jsfiddle.net/hnzhbz69/|offset|length|280689|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/hnzhbz69/^0|0|0|3|U|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>Simple solution:</p>

<pre><code>&lt;select&gt;
  &lt;option&gt;Simple&lt;/option&gt;
  &lt;option class='bolden'&gt;Bold&lt;/option&gt;
  &lt;option&gt;Simple&lt;/option&gt;
&lt;/select&gt;
&lt;style&gt;
  .bolden{font-family:"Arial Black"}
&lt;/style&gt;
</code></pre>

<p>Example: <a href="https://jsfiddle.net/hnzhbz69/" rel="nofollow">https://jsfiddle.net/hnzhbz69/</a></p>


blocks|key|3204679|text|我认为为时已晚，但这件事对我很有效。将属性'font-weight:+bolder‘应用于option标记，使其中的文本变为粗体，而不使用任何html标记。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3204680|<option+value="optionValue"+class="bold-option">
.bold-option{font-weight:+bolder;}|code-block|syntax|javascript|3204681|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>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.</p>

<pre><code>&lt;option value="optionValue" class="bold-option"&gt;
.bold-option{font-weight: bolder;}
</code></pre>


blocks|key|282362|text|使用CSS，是的，这是可能的|type|unstyled|depth|inlineStyleRanges|entityRanges|data|282363|​|282364|+++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;
}
*/|code-block|syntax|javascript|282365|<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>|282366|282367|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>using CSS yes it's possible </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>   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;
}
*/</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;select&gt;
&lt;option value='1'&gt;first&lt;/option&gt;
&lt;option value='2'&gt;Second&lt;/option&gt;
&lt;option value='3'&gt;Third&lt;/option&gt;
&lt;option value='4'&gt;Fourth&lt;/option&gt;
&lt;option value='5'&gt;Fifth&lt;/option&gt;
&lt;/select&gt;</code></pre>
</div>
</div>
</p>


blocks|key|284344|text|在select中加粗第n个选项。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|284345|在css中无法做到这一点。如果仍然需要区分选项，请使用颜色和背景。|284346|.diff-option+{
+++color+:+grey;
}
.other-options{
+++color:white
+++background:+...
}|code-block|syntax|javascript|284347|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Bold a nth option in select.</p>

<p>There is no way to do this in css. If still differentiation between options is required, use color, and background.</p>

<pre><code>.diff-option {
   color : grey;
}
.other-options{
   color:white
   background: ...
}
</code></pre>


blocks|key|282355|text|你可以在火狐中使用<strong>或<b>，但它不能在Chrome或IE中运行(其他浏览器就不行了)|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|282356|entityMap^0|9|8|I|3|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

<p>Well, you can use the <code>&lt;strong&gt;</code> or <code>&lt;b&gt;</code> in firefox, but it won't work in Chrome or in IE (not cheked any other)</p>


blocks|key|3204564|text|尝试在css中使用<span+id="wrap">Some+text</span>对文本进行换行。执行此#wrap+{font-weight:+bold}|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3204565|entityMap^0|9|W|1G|P|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

<p>Try to wrap the text with <code>&lt;span id="wrap"&gt;Some text&lt;/span&gt;</code> in css do this 
<code>#wrap {font-weight: bold}</code></p>


<p>I'm not sure if this is even possible, but I have a case where I'd like to bold <strong>part</strong> (not all) of the text within an option of an HTML select tag.</p>

<p>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.</p>

<p>Is there any way to do this?</p>


Partially Bold Text in an HTML select

jQuery

我甚至不确定这是否可能，但我遇到了这样的情况:我希望将HTML select标记选项中的文本加粗part (而不是全部)。我尝试使用b标签和强标签，但没有成功(在Chrome上)。CSS可能会起作用，但由于它是在元素级别工作的，我不知道该怎么做。有没有办法做到这一点？

问HTML select中的部分加粗文本
EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML select中的部分加粗文本EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML select中的部分加粗文本
EN