使用CSS

Question

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

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

Link for better example

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

我来到这里之前一直在寻找答案的PPS，我发现这可能与AJAX和有关.select2 CSS的东西有关，但我在查看页面或将代码添加到我的代码时却看不到该CSS代码CSS。

很抱歉，如果这是我没有看到的简单解决方案，但是能够对下拉菜单进行样式设置以使其与我的网站样式相匹配会很高兴。

Answer 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 );