html - HTML 选择选项，文本格式

Question

是否有任何现代浏览器支持任何类型（任何类型）的内部文本格式（因此单个选项的一部分是不同的格式）。不同的一面，颜色，强度，下标，任何东西。

到目前为止，Chrome 至少似乎只是删除了选项标签内的所有标签。

我正在寻找一些东西来完成这种风格的结果（无需处理画布）：

<option value="8470621">Corey Perry <i>Anaheim Mighty Ducks</i></option>

或者

<option value="8474141"><b>Patrick Kane</b> Chicago Blackhawks</option>

score 10 · Accepted Answer

当前不支持选项中的嵌套 HTML 标记。您可以使用的最接近的格式元素是<optgroup>将选项分组到部分中。

你可以做的是使用像Select2或Chosen这样的 javascript 替换来设置元素的样式。它不是原生的，但它确实支持 HTML。

score 2 · Accepted Answer

2

正如规范“4.10.12 选项元素”<option>所述，仅是-element文本的内容模型。

于 2013-08-22T20:06:15.423 回答

score 1 · Accepted Answer

答案是不。

正如您在MDN上看到的：

允许的内容：带有最终转义字符的文本（如 é）。

有组合其他标签的替代方案，但不是select和option。

进一步阅读：

score 0 · Accepted Answer

我发现这种方法可以覆盖列表中的文本，但它可能无济于事:)

var result ="";
$.each(text.split(""), function () {
result += this + "\u20EB";
});

score 0 · Accepted Answer

今天，它可以通过多种方式制作：

例子

直接在option元素上设置样式

<option value="1" selected="selected" style="font-weight:600; background-color: aquamarine;"> MyOption </option>

班级和CSS

.optionA {
  font-weight:600; 
  background-color: aquamarine;
}

<option value="1" selected="selected" class="optionA"> MyOption </option>

身份证和CSS

#myId {
font-weight:600; 
background-color: aquamarine;
}

<option value="1" selected="selected" Id="myId"> MyOption </option>

属性属性和CSS

option[selected="selected"] {
font-weight:600; 
background-color: aquamarine;
}

<option value="1" selected="selected"> MyOption </option>

您也可以在CSS 伪元素上使用，例如:nth-child(),:nth-of-type()等。