select2：使单选的高度与多选的高度匹配？

Question

我正在使用令人惊叹的 select2 jquery 插件。我想让单选框的高度与多选框的高度相匹配。

我尝试过各种 CSS 修复，包括：

.select2-container .select2-choice {
    height: 36px;
}

但似乎没有任何作用。有人可以帮忙吗？

JSFiddle在这里：http://jsfiddle.net/vfa4831b/1/

Answer 1

将其添加到您的 CSS 中：

.select2-container .select2-selection--single {
    height: 32px;
}

$(".js-example-basic-single").select2();
$(".js-example-basic-multiple").select2();

.select2-container .select2-selection--single {
  height: 32px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet">

<select style="width: 100px" class="js-example-basic-single">
  <option value="AL">Alabama</option>
  <option value="WY">Wyoming</option>
</select>

<select style="width: 100px" class="js-example-basic-multiple" multiple="multiple">
  <option value="AL">Alabama</option>
  <option value="WY">Wyoming</option>
</select>

JSFiddle

Answer 2

.select2-selection__rendered {
    line-height: 35px !important;
}

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

.select2-selection__arrow {
    height: 35px !important;
}