外观

您可以通过标准HTML属性自定义Select2控件的外观, <select> 元素以及各种配置选项

禁用Select2控件

Select2将响应<select> 元素 disabled 属性 。您也可以使用 disabled: true 获得相同的效果。



标签

您可以并且应该使用 <label> 与Select2一样, <select> 元素.

<label for="id_label_single">
  单击此按钮以聚焦单个选择元素
  <select class="js-example-basic-single js-states form-control" id="id_label_single"></select>
</label>

<label for="id_label_multiple">
  单击此按钮以集中多个选择元素
  <select class="js-example-basic-multiple js-states form-control" id="id_label_multiple" multiple="multiple"></select>
</label>

容器宽度

Select2将尝试尽可能接近原始元素的宽度。有时这并不完美,在这种情况下,您可以手动设置width 配置选项:

描述
'element' 使用任何适用CSS规则计算的元素宽度。
'style' 宽度由 select 元素的 style 属性。如果没有 style 找到属性,则返回null作为宽度。
'resolve' 使用 style 属性值(如果可用),并根据需要回退到计算的元素宽度。
'<value>' 有效的CSS值可以作为字符串传递(例如 width: '80%').

下面的两个Select2框分别设置为50%75% 分别为,以支持响应式设计:

<select class="js-example-responsive" style="width: 50%"></select>
<select class="js-example-responsive" multiple="multiple" style="width: 75%"></select>


Select2会尽力解决通过CSS类指定的宽度百分比,但并非总是可能的。确保Select2使用基于百分比的宽度的最佳方法是将style 声明内联到标记中。

主题

Select2使用该theme选项支持自定义主题,因此您可以设置Select2的样式以使其与应用程序的其余部分匹配。

这些示例使用classic 主题,与Select2的旧外观匹配。



可以更改Select2组件的各种显示选项。您可以访问<option> 元素(或 <optgroup>)以及这些元素上的任何属性,请使用 .element.