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

Question

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

默认情况下，选择字段的高度与其他字段不同：

我设法在 css 中通过使用这个类上的填充找到了执行此操作的部分：

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

但随后选择选项和箭头不在中间：

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

.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;
}