在 WooCommerce 结帐中设置选择输入的样式，就像文本输入一样

Question

结账网址，以便您可以查看源代码： https://whitebrightsmile.com/checkout/?add-to-cart=6627&quantity=1

text

输入被赋予

border-radius

（通过 Elementor），边框实际上是

box-shadow

，以避免焦点时布局移位，因为它增加 1px（自定义 CSS）：

.page-id-80 input[type=email], .page-id-80 input[type=text], .page-id-80 input[type=tel] {
    border: none;
    box-shadow: inset 0 0 0 1px rgba(170, 170, 170, 0.3);
    }
    
.page-id-80 input[type=email]:focus, .page-id-80 input[type=text]:focus, .page-id-80 input[type=tel]:focus {
  box-shadow: inset 0 0 0 2px #FF6BA1;
}

现在我希望 State

select

元素看起来与其他表单字段完全相同，具有“边框”和焦点时的粉红色。

似乎

select

比其他字段高一点，我希望它具有相同的高度。不可能以与其他输入相同的方式设置此

select

的样式，无论是通过 Elementor 还是我已经弄清楚的任何 CSS。

有人可以帮助我实现这个目标吗？

Answer 1

将此 css 添加到您的活动主题 style.css 文件中

.elementor-80 .elementor-element.elementor-element-5d7cd29 .select2-container--default .select2-selection--single {
      height: auto;
      border: 1px solid #f5f5f5 !important;
}