Question

我有一个选择框，每个扑克牌套装都可以选择。我还给每个选项一个Unicode字符。现在我想为Unicode字符添加颜色。例如，Hearts会变红。但我无法弄清楚如何做到这一点。

我知道在<span>中添加<option>是一个坏主意，因此我无法将每个char设置为单独的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，你可以利用一个小技巧，如果select标签有一个size属性，你可以使用:: 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>

在https://jsfiddle.net/cno3tog7/中查看此操作有关更多跨浏览器的方法，我建议使用构建非本机选择的内容，例如使用Bootstrap。

如何在下拉列表选择中为Unicode字符添加颜色

1 个答案: