CODEWITHSUNDEEP
jquery-select2yii2
Dmytro
Dmytro

Reputation: 717

kartik Select2 widget. How to change color of choices?

I am curious how to change the hover color of choices in kartik select2 widget?enter image description here

I use yii2. My app renders following code for dropdown element of select2:

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

But there is nothing inside it. So which classes are responsible for choices hover e.t.c?

Upvotes: 0

Views: 2486

Answers (2)

Paweł Liszka
Paweł Liszka

Reputation: 330

this CSS should do the job (if you was asking for the Category3 dark blue element)

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

Select2 Yii2 change (hovered / highlighted) item

Upvotes: 1

Husnain Aslam
Husnain Aslam

Reputation: 865

This is how kartik select2 creates the DOM. Above the <span> you will find <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>

Applying your hover effect on the <select> options tag will solve your problem.

Upvotes: 0

Related Questions