如何格式化<select>＆＃39> <option>元素？</option> </select>

Question

如何格式化<select>的{​​{1}}元素？目前我们必须使用一些插件，如select2，或select，或selectboxit，或selectizr。

如果我们只需要修改<option>的{​​{1}}元素的UI，并且不需要使用这些库其他功能，如标记，搜索等，这些js文件都很大。 / p>

我能够删除<select>的箭头，以便我可以使用任何自定义箭头。检查一下： How can I hide a <select> arrow in Firefox 30+?

但我没有找到改进元素表现的任何选择。

Answer 1

您可以做的最多就是color文字并更改background-color。

＆＃13;

＆＃13;

<select>
    <option style="background-color: red;">Opt 1</option>
    <option style="background-color: green; color: white;">Opt 2</option>
    <option style="background-color: blue; color: white;">Opt 3</option>
</select>

＆＃13;

＆＃13;

＆＃13;

您可以尝试应用其他样式，但这不是标准的事情。有些浏览器甚至会忽略应用于select和option代码的样式。