有什么方法可以设置 <select> 下拉选项容器和项目的样式吗？

Question

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

像这样：

Answer 1

如果您给下拉列表一个 ID，那么您可以 select 使用 jQuery 的 ID 并使用它的 children 方法。您甚至可以指定 child.

像这样：

$("dropdownId").children().css({"color": "yellow", "border": "1px纯红色"});

Answer 2

所有浏览器定义 select 彼此不同。您可以使用 UL 和 LI 制作自定义 select 列表。

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

而 select 类似于：

<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>

有什么方法可以设置 <select> 下拉选项容器和项目的样式吗？

Is there any way to style <select> dropdown options container and items?

javascript

css

wordpress

contact-form-7