如何设置 Woocommerce 结帐 select 选项的样式？

Question

我正在尝试更改我的 Woocommerce 结帐页面中 select（下拉）字段的样式。我将它与 DIVI 主题一起使用。

默认情况下，select 字段与另一个字段的高度不同：

我设法在 css 中找到了执行此操作的部分，方法是在 class 上使用填充：

.woocommerce-input-wrapper .select2-container--default .select2-selection--single

但是 select 选项和箭头不在中间:

如果我在这里降低行高，我可以移动字段的内容：

.select2-container--default .select2-selection--single .select2-selection__rendered

但是如果我减少太多，文本会被截断

如何将字段的内容正确移动到中间？谢谢

Answer 1

试试这个。将下面代码中的 40px 更改为您想要的值。在 windows、google chrome.

中测试和工作

.select2-container .select2-selection--single{
    height: 40px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow{
    height: 40px !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered{
    line-height: 40px !important;
}

如何设置 Woocommerce 结帐 select 选项的样式？

How do I style the Woocommerce checkout select option?

css

jquery-select2

woocommerce