kartik Select2 Widget. Wie ändere ich die Farbe der Auswahl?

Question

Ich bin neugierig, wie Sie die Hover-Farbe der Auswahl in kartik select2 widget ändern?

Ich verwende yii2. Mein app rendert folgende code für dropdown Element select2:

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

Aber es gibt nichts in seinem Inneren. Welche Klassen sind für die Auswahl verantwortlich? e.t.c?

Answer 1

So erstellt kartik select2 das DOM. Über dem <span> finden Sie <select> Tag.

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

Anwenden der Hover-Effekt auf dem <select> Optionen Tag wird Ihr Problem lösen.

Answer 2

diese CSS sollte die Arbeit tun (wenn Sie für die Kategorie 3 dunkelblau Element bat)

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