Question

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

现在我有另一个问题。

例如，有些框应该只有一行（默认），其他100px，其他200px。

现在，我正在使用这个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元素中。因此，将＆＃34; child＆＃34; 类分配给内部元素。因此，将元素与CSS类结构相关联，并将所需的类分配给相应的元素。

Answer 2

我发现你必须在select2元素的构造函数中指定css类（在JS部分中）。

在containerclass中，您可以简单地传递应该应用的多个不同的类，按空格分隔。 tpx-select2-container是我正在使用的皮肤，而select2-bigbox和select2-small是我自己编写的类。

他们的内容看起来像这样：
.select2-bigbox{ min-height:300px !important; }

 $("#bigbox").select2({
        //select2 parameters
        containerCssClass: 'tpx-select2-container select2-bigbox',
    });


$("#smallbox").select2({
    //select2 parameters
    containerCssClass: 'tpx-select2-container select2-smallbox',
 });

我身边的问题是我混淆了＃class; classA classB classC＆＃34;在CSS调用中使用＆＃34; classA classB classC＆＃34;在CSS定义中。

在CSS .classA .classB{ }的定义中表示：＆＃34;对于在classA中找到的每个classB元素，应用以下＆＃34;。

CSS <element class="classA classB">的 invokation 表示：＆＃34;应用classA和classB＆＃34;的所有样式。

Select2 4.0.0：多个元素

2 个答案: