外观

你可以通过标准 HTML 元素属性以及各种选项来定制 Select2 控件的外观<select>元素，以及其他配置项配置选项.

禁用 Select2 控件

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

<label for="id_label_single">
  Click this to highlight the single select element

  <select class="js-example-basic-single js-states form-control" id="id_label_single"></select>
</label>

<label for="id_label_multiple">
  Click this to highlight the multiple select element

  <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.