select2 将样式应用于 select

Question

我从 cdn 中包含 select2 并将其应用到我的 select 多输入：

我的javascript:

$('select').select2();

我的html:

<select id = "cars" name="cars[]" multiple = "multiple" required = "required">

我的css:

#cars{
   background-color:red !important;
}

出于某种原因，每当我将 select2 应用于我拥有的任何 select 时，我赋予此 select 的所有特定样式都不再出现。我试图通过 id 和 class 指定这些样式，它们都会显示，但是当我输入 $('select').select2(); 时，我为此指定的任何样式 select 都不会显示。

我该如何解决这个问题？

Answer 1

Select2 隐藏选择并重新呈现

Example fiddle here with red background

Css 应用：

.select2-drop {
  background: red; /* !important not needed */
}

Fiddle with newer version of select2 (4.0.3)

Css 应用：

.select2-dropdown {
  background: red;
}

Answer 2

select2 将 select 显示设置为 none 并创建几乎像这样的元素：

<span class="select2 select2-container select2-container--default select2-container--below select2-container--focus" dir="rtl" style="width: 97px;"><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-c968-container"><span class="select2-selection__rendered" id="select2-c968-container" title="ظرفیت - بیشترین">ظرفیت - بیشترین</span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>

您必须使用检查元素来更改样式。 set select { ... } 再也帮不上忙了，因为 select 元素显示被 select2.js 设置为 none。

select2 将样式应用于 select

select2 apply styles to select

html

css

jquery

select2