WooCommerce 使用 CSS 的可变产品下拉菜单样式答案

【问题标题】：WooCommerce Variable product dropdown menu styling using CSSWooCommerce 使用 CSS 的可变产品下拉菜单样式
【发布时间】：2019-05-16 06:28:19
【问题描述】：

我有一个安装了 WooCommerce 的 Wordpress 网站，其中安装了一些可变产品，每个产品的每个变体都有一个下拉菜单，单击时会显示不同的变量。

我的问题是如何设置单击时出现的下拉菜单的样式？我可以成功更改下拉菜单的字体颜色和大小，但不能更改背景颜色、文本之间的填充等。

Link for better example

PS 我使用带有“Hello Elementor Basic 主题”的“Elementor Pro”插件来编辑我的页面并添加自定义 CSS。

PPS 在来这里之前我已经搜索过答案，我发现这可能与 AJAX 和有关 .select2 CSS 的某些内容有关，但在检查我的页面或将代码添加到我的页面时我没有看到该 CSS 代码CSS。

很抱歉，如果这是一个我没有看到的简单解决方案，但如果能够设置下拉菜单的样式以匹配我网站的样式，那就太好了。

【问题讨论】：

标签： javascript css ajax wordpress woocommerce

【解决方案1】：

如果我理解正确，您想更改本机下拉选择。如果是这样，您可以将 CSS 与 JavaScript 结合使用。

也许这个页面可以为你指明正确的方向：https://www.w3schools.com/howto/howto_custom_select.asp

每个可变产品选择字段的 ID 和类名称是根据属性名称设置的。因此我建议用这样的父元素来抓取它们：

.single-product div.product table.variations select {
/* Your Custom Style Here */
}

您可以使用我与您共享的 JS 作为参考，并使用此钩子将其添加到您的 WP 的页脚：

// ADDS CUSTOM JAVASCRIPTS TO WP_FOOTER
function child_theme_footer_script() { ?>
<script>
    // YOUR CUSTOM FUNCTION HERE
</script>
<?php }
add_action( 'wp_footer', 'child_theme_footer_script', 20 );

【讨论】：

所以听起来需要学习一些 javascript 才能完成这个任务？除非我遗漏了一些东西，并且您在上面添加的 CSS 代码能够在不添加我自己的 JS 的情况下执行此操作？
我给你的 CSS 可以改变字段样式的某些方面，但要完全自定义原生选择，你必须实现 JS。您可以使用我与您共享的 JS 作为参考，并将其添加到您的 WP 页脚，并在我更新的答案中显示钩子。
是的，我已经成功地设置了单击前显示的框的样式，但我只是在设置单击每个属性的选择框时显示的下拉菜单时遇到了问题。但从我需要实现 javascript 以获得我想要的结果的事情来看，我对 javascript 一无所知，所以我最好学习一下。快速的侧面问题，为什么需要将其添加到页脚？为什么不是标题？
您可以根据需要将其添加到标题中。
我还没有在我的网页上实现预期的结果，但我相信这是我正在寻找的正确答案，我只需要深入了解 javascript 的核心基础，然后才能正确实现它;所以我已将答案标记为可以接受