kartik Select2ウィジェット。どのように選択肢の色を変更するには？

Question

kartik select2 widgetで選択肢のホバーカラーを変更する方法が不思議ですか？

私はyii2を使用します。私appはselect2のdropdown要素についてcodeを以下のレンダリング：

<span class="dropdown-wrapper" aria-hidden="true"></span> 

しかし、内部は何もありません。どのクラスが選択を担当するのですかhover e.t.c？

Answer 1

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>オプションタグにホバー効果を適用すると、問題が解決します。

Answer 2

（あなたがカテゴリー3ダークブルーの要素を求めていた場合）、このCSSは

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