Как переопределить .select2-results .select2-выделенный цвет

Я использовал select2 плагин. У меня есть два поля ввода. Мне нужно, чтобы оба цвета были выделены цветом. Может ли кто-нибудь сказать мне, как переопределить выделенный цвет?

javascript,jquery,html,css,

1

Ответов: 2


1

Если у вас есть два разных объекта выбора, это довольно просто:

$(document).ready(function() {
 $(".select-1").select2();
 $(".select-2").select2();
});

то в вашем css выполните:

.select-1 select2-results__option select2-results__option--highlighted {
    background: #5897fb;
 }

.select-2 select2-results__option select2-results__option--highlighted {
    background: #6d6d6d;
}

Редактировать:

Оказывается, select2 добавляет созданное поле предложения в тело документа, а не элемент select it self. Один из вариантов может состоять в том, чтобы поместить выборки внутри родительского контейнера и использовать проход в опции dropdownParent для конструктора:

 $("#menuOption1").select2({dropdownParent: "#menuOption1-container"});

Таким образом, вы получите что-то вроде этого:

Разметка:

<span id="menuOption1-container">
    <select id="menuOption1"> 
        <option value="1"> One </option>
        <option value="2"> Two </option>
        <option value="3"> Three </option>
        <option value="4"> Four </option>
        <option value="5"> Five </option>
    </select>
</span>

<span id="menuOption2-container">
    <select id="menuOption2"> 
        <option value="a"> Vowel a </option>
        <option value="e"> Vowel e </option>
        <option value="i"> Vowel i </option>
        <option value="o"> Vowel o </option>
        <option value="o"> Vowel u </option>
    </select>
</span>

JQuery:

$(document).ready(function() {
    $("#menuOption1").select2({dropdownParent: "#menuOption1-container"});
    $("#menuOption2").select2({dropdownParent: "#menuOption2-container"});
});

и, наконец, Css:

#menuOption1-container  .select2-results__option--highlighted {
    background-color: #50831F !important;
}

#menuOption2-container  .select2-results__option--highlighted {
   background-color: #28915F !important;
}

Вот живой пример:

jsfiddle


0

Если кто-нибудь найдет этот вопрос и у него проблемы select2-results__option select2-results__option--highlighted { background-color }с заменой на синий (по умолчанию # 5897fb), убедитесь, что вы не включаете код css внутри элемента, который обертывает ваш select2. Причина в том, что указано в первом ответе:

Оказывается, select2 добавляет созданное поле предложения в тело документа, а не сам элемент select.

JavaScript, JQuery, HTML, CSS,
Похожие вопросы