HTML选项列表中选项的样式部分（<select>）

Question

我试图只设置与此类似的选项列表选项的部分（字/字母）： 这是包含＆lt; span style =“color：red;”＆gt; Colored＆lt; / span＆gt;的文本。文本。 上面的例子很好用。但是，如果我尝试做任何类似的事情＆lt; select＆gt;元素，它根本不渲染span标记。 ＆LT;选择＆GT;   ＆lt; option value =“volvo”＆gt; Volvo＆lt; / option＆gt;   ＆lt; option value =“alfaromeo”＆gt;＆lt; span style =“color：red”＆gt; Alfa＆lt; / span＆gt;罗密欧＆LT; /选项＆GT; ＆LT; /选择＆GT; 您也可以在选项标签中指定样式，但这会影响整个选择，而不仅仅是其中的一部分。 总结一下，除了制作看起来像选择的自己的HTML元素之外，还有什么好方法吗？ DEMO

Answer 1

您无法设置option代码的样式。您可以使用Select 2等隐藏原始select的库并创建一个新的库，可以使用它。

Answer 2

此代码适用于我。不确定此代码与旧版浏览器的向后兼容性，但这已通过Chrome测试。

    <style type="text/css">
    select.picker {
        font-size: 2.4em;
    }
    select.picker option {
        color: green;
    }
    select.picker option:first-child {
        color: blue;
    }
</style>

这是标记

<select class="picker">
    <option value="a">Option A</option>
    <option value="b">Option B</option>
    <option value="c">Option C</option>
</select>

证据......

快乐的编码！

Answer 3

造型选择是一个难题。试试这个模仿带有一些CSS和jQuery的选择框的选项：

https://github.com/octopuscreative/FancySelect