kartik Select2小部件。如何改变选择的颜色？

Question

我很好奇如何更改kartik select2 widget中的选择悬停颜色？

我使用yii2。我的app为code的{​​{1}}元素提供了dropdown后的跟踪：

select2

但其中没有任何内容。那么哪些类负责选择<span class="dropdown-wrapper" aria-hidden="true"></span> e.t.c？

Answer 1

这个CSS应该完成这项工作（如果你要求的是Category3深蓝色元素）

.select2-container--krajee .select2-results__option--highlighted[aria-selected] {
    background-color: lime;
}

Answer 2

这就是kartik select2创建DOM的方式。在<span>上方，您会找到<select>标记。

<select id="w13" class="form-control select2-hidden-accessible" name="kv-type-01" data-s2-options="s2options_d6851687" data-krajee-select2="select2_f12d7f7f" style="display:none" tabindex="-1" aria-hidden="true">
    <option value="">Select a type...</option>
    <option value="1">First</option>
    <option value="2">Second</option>
    <option value="3">Third</option>
    <option value="4">Fourth</option>
    <option value="5">Fifth</option>
</select>
<span class="select2 select2-container select2-container--krajee select2-container--below select2-container--open select2-container--focus" dir="ltr" style="width: 100%;"><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="true" tabindex="0" aria-labelledby="select2-w13-container" aria-owns="select2-w13-results" aria-activedescendant="select2-w13-result-9vjw-5">
  <span class="select2-selection__rendered" id="select2-w13-container">
    <span class="select2-selection__placeholder">Select a type ...</span>
  </span>
  <span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span>
  </span>
  </span>
  <span class="dropdown-wrapper" aria-hidden="true">
  </span>
</span>

将悬停效果应用于<select>选项标记可以解决您的问题。