将附加按钮高度与 select2 下拉菜单对齐

Question

我已经自定义了select2 dropdown 的高度。但是appendbutton的高度无法正确自定义。

下面是我的html

 <div class="input-group input-group-sm">
     <select class="form-control form-control-sm select2">
          <option value="">Select Supplier</option>
      </select>
     <div class="input-group-append">
          <input class="btn btn-sm btn-outline-secondary" type="button" value="..." />
     </div>    
 </div>

下面是自定义的css

.select2, .select2-selection__rendered {
    line-height: calc(1em + .1rem + 0px) !important;
    padding-top:5px;
}

.select2-container .select2-selection--single {
    height: calc(1.5em + .4rem + 0px) !important;
}

.select2-container--bootstrap4 .select2-selection--multiple {
    min-height: calc(1em + .75rem + 2px) !important;
}

.select2-selection__arrow {
    height: calc(1.5em + .5rem + -30px) !important;
}

Answer 1

尝试为“输入”标签而不是覆盖它的 div 赋予高度。 例如。

input {
    height: 20px;
}

或

btn {
 height: 20px
}