Question

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

我的javascript：

$('select').select2();

我的HTML：

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

我的css：

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

出于某种原因，每当我将select2应用于任何我选择的时候，我给这个选择的所有特定样式都不再出现。我尝试通过id和class指定这些样式，但它们都显示但是当我放置$('select').select2();时，我指定的任何样式都没有显示。

我该如何解决这个问题？

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 display设置为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>

你必须使用inspect元素来改变风格。 set select {...}无法帮助，因为select2.js将select元素显示设置为none。

select2应用样式进行选择

2 个答案: