HTML 选择中的部分粗体文本答案

【问题标题】：Partially Bold Text in an HTML selectHTML 选择中的部分粗体文本
【发布时间】：2021-01-02 06:06:17
【问题描述】：

我不确定这是否可能，但我有一种情况，我想在 HTML 选择标记的选项中加粗部分（不是全部）文本。

我尝试使用 b 标签以及强标签，但没有成功（在 Chrome 上）。 CSS 可能有效，但由于它在元素级别有效，我不知道该怎么做。

有什么办法吗？

【问题讨论】：

伪元素 :first-letter 和 :first-line 可以让您对此进行一些控制，但它可能没有您想要的那么多微调。

标签： html css

【解决方案1】：

没有；这是不可能的。

相反，您可以使用 Javascript 制作一个虚假的下拉列表。

【讨论】：

我感觉这可能就是答案。谢谢！
其实还有没有更简单的解决方法，看看Pritesh的回答。

【解决方案2】：

因为 chrome 不允许在 option tag 上使用粗体字体。您可以使用 text-shadow 属性，如

文本阴影：0px 0px 0px 黑色；

它将呈现相同的粗体外观并适用于所有浏览器

【讨论】：

为什么投票率这么低？它解决了我的问题。似乎“现在人们继续匆匆忙忙”。
你也可以使用'text-shadow: 1px 1px black;'
这可能是低投票，因为它是错误的 - (a) 它不会按照 OP 的要求仅将部分文本加粗，并且 (b) 我认为只有 color 是交叉的-浏览器。

【解决方案3】：

不，这是不可能的。您有两种选择：

1) 使用<optgroup> 为您正在做的事情创建一个描述性标题（这可能会有所帮助）。

2) 使用 JavaScript 模拟下拉菜单。我不确定，但我认为 jQuery UI 可能有一个下拉菜单脚本。

【讨论】：

【解决方案4】：

我认为为时已晚，但这对我有用。将属性 'font-weight: bolder' 应用于选项标签，使其中的文本变为粗体，而不使用任何 html 标签。

<option value="optionValue" class="bold-option">
.bold-option{font-weight: bolder;}

【讨论】：

这在 Firefox 中对我有用。我认为这仍然是特定于浏览器的。
请求仅将部分文本加粗。

【解决方案5】：

简单的解决方案：

<select>
  <option>Simple</option>
  <option class='bolden'>Bold</option>
  <option>Simple</option>
</select>
<style>
  .bolden{font-family:"Arial Black"}
</style>

示例：https://jsfiddle.net/hnzhbz69/

【讨论】：

何人！注意！要求的问题是如何仅将部分文本加粗！
这个答案假定字体随用户的操作系统一起提供，但它可能不会。
我尝试将它与 mdboostrap 一起使用，但对我来说并没有效果

【解决方案6】：

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

【讨论】：

与要求一个选项的仅部分文本为粗体的问题相矛盾。这将使一个选项的所有文本变为粗体

【解决方案7】：

加粗选择中的第 n 个选项。

在 css 中没有办法做到这一点。如果仍然需要区分选项，请使用颜色和背景。

.diff-option {
   color : grey;
}
.other-options{
   color:white
   background: ...
}

【讨论】：

【解决方案8】：

好吧，你可以在 firefox 中使用 <strong> 或 <b>，但它在 Chrome 或 IE 中不起作用（其他都没有）

【讨论】：

甚至 MDN 都没有建议：developer.mozilla.org/en-US/docs/Web/HTML/Element/option - 您应该提供参考并命名该功能。如果不存在，这是非常脆弱的。

【解决方案9】：

尝试在 css 中用 <span id="wrap">Some text</span> 包裹文本这样做 #wrap {font-weight: bold}

【讨论】：

我正要说同样的话。我刚刚测试过，不行。
你不能在<option>元素中放置标签。
您可以尝试为选项元素本身添加样式，但我怀疑这会有所帮助。 :)
实际上，我通过向select 和option 元素添加样式，制作了一个只有CSS 的水色按钮样式下拉菜单。