有没有办法设置 <select> 下拉选项容器和项目的样式？答案

【问题标题】：Is there any way to style <select> dropdown options container and items?有没有办法设置 <select> 下拉选项容器和项目的样式？
【发布时间】：2017-03-07 04:47:14
【问题描述】：

我在 wordpress 上使用联系表格 7，我不想使用插件，而是尽可能使用纯 css/js 来带来结果。

类似这样的东西：

【问题讨论】：

这样做的唯一方法是伪造一个选择下拉菜单，您实际上不能像这样设置select 下拉菜单的样式，因为该元素的样式是由浏览器决定的。
选择选项不能单独用CSS实现，顶部可以用CSS创建。 codepen.io/ericrasch/pen/zjDBx
在联系表格 7、woocommerce 和其他表格中，我只是使用 jquery 来包装所有选择，然后我可以设置样式。许多 jQuery 插件无法让您输入选项的前几个字母。

标签： javascript css wordpress contact-form-7

【解决方案1】：

所有浏览器都定义了彼此不同的选择。您可以使用 UL 和 LI 来自定义选择喜欢列表。

这是example，这可以帮助您使所有选择在所有浏览器和移动设备上看起来都相似。

而选择会是这样的：

<ul>
    <li class="init">[SELECT]</li>
    <li data-value="value 1">Option 1</li>
    <li data-value="value 2">Option 2</li>
    <li data-value="value 3">Option 3</li>
</ul>

【讨论】：

【解决方案2】：

如果你给你下拉一个 id，那么你可以使用 jQuery 选择 id 并使用它的 children 方法。您甚至可以指定哪个孩子。

类似这样的：

$("dropdownId").children().css({"color": "yellow", "border": "1px solid red"});

【讨论】：

这将not have any effect 选项的样式。