將 Append 按鈕高度與 select2 下拉菜單對齊

Question

我已經自定義了select2 dropdown的高度。 但append button高度無法正確自定義。

我的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
}