javascript - 选择 2 4.0.0 : different box heights for multiple elements

Question

我刚刚发现如何设置 select2 输入框的高度。 related question

现在我有另一个问题。

例如，一些框应该只有一行高(默认)，其他框为 100 像素，还有一些框为 200 像素。

现在，我正在将这个 css 用于一个大输入框

.select2-container .select2-selection--multiple{
    min-height:100px;
    padding-bottom: 20px;
}

但这显然改变了页面上所有框的高度。

如何调整单个框的高度？

Answer 1

在现有类之后的 Select2.css 中添加以下类

.select2-container-bigger{
    min-height:200px;
    padding-bottom: 20px;
}

并按如下方式创建您的元素:-

<span class="select2-container">
  <input type="text" 
       id="text1" class="select2-selection--multiple"/>
  <input type="text" 
       id="text2" class="select2-container-bigger"/>
</span>

注意 css class 是如何在文件中定义的。它是 select2-container 后跟 select2-selection--multiple。因此，后者应该包含在具有前一个类的元素中。

在我们的例子中，带有 id="text1" 的输入元素包含在 select2-container 类类型的 span 元素中。因此，将 “child” 类分配给内部元素。因此，根据 CSS 类结构构建您的元素，并将所需的类分配给相应的元素。