如何添加颜色的Unicode字符内下拉选择

Question

我有一个选择框，其中每一套纸牌作为一个选项。我还为每个选项提供了一个Unicode字符。现在我想给Unicode字符添加颜色。例如，红心是红色的。但我不知道该怎么做。

我知道在<option>中添加<span>是一个坏主意，所以我不能将每个字符样式为单独的span元素。

我该怎么做呢?

<select class = "form-control">
    <option value = "clubs">&clubs; Clubs</option>
    <option value = "diamonds">&diams; Diamonds</option>
    <option value = "hearts">&hearts; Hearts</option>
    <option value = "spades">&spades; Spades</option>
</select>

Answer 1

这在一定程度上是有限制的，因为HTML规范规定只能将选项标签的内容视为文本。对于Chrome和Firefox，你可以利用一个小技巧，如果选择标签有一个大小属性，你可以使用::first-letter属性来样式化选项:

CSS:

option.red::first-letter {
  color: red;
}

HTML:

<select size="4" class = "form-control">
    <option value = "clubs">&clubs; Clubs</option>
    <option class="red" value = "diamonds">&diams; Diamonds</option>
    <option class="red" value = "hearts">&hearts; Hearts</option>
    <option value = "spades">&spades; Spades</option>
</select>

对于更跨浏览器的方法，我建议使用构建非本机选择的东西，例如使用Bootstrap。