Ошибка стилизации Select2 для Bootstrap 4

Question

Я работаю с Bootstrap 4, и для элементов <select> я хочу использовать Select2 .

Проблема в том, что у него нет официального шаблона Bootstrap 4, поэтому я искал и нашел этот проект, который потрясающий.

Но у меня одна проблема с классом is-invalid.

Когда я его использую, границы <select> изменяются на красный при загрузке страницы, а затем возвращаются в нормальное состояние

Я пытаюсь сделать простой класс для использования с тем же цветом Bootstrap, как

.invalid-select2 {
  border-color: #dc3545;
}

.invalid-select2:focus {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

Но результат тот же;

Вы можете увидеть проблему в JSFIDDLE

У кого-то есть идея, как с этим справиться?

Большое спасибо!

Answer 1

flikcering потому, что вы добавляете класс к атрибуту класса блока выбора, поэтому стиль применяется немедленно. После этого применяются классы select2, которые скрывают поле выбора (вызывая мерцание).

Одним из способов решения этой проблемы является простое применение класса, когда документ готов.

$(document).ready(function(){

    $('#combo').select2
  ({
    theme: 'bootstrap'
  });

  $("#combo + span").addClass("is-invalid");

});

РЕДАКТИРОВАТЬ: Чтобы устранить проблему с фокусировкой, которую вы испытываете, вам нужно перевесить пару классов.

.is-invalid .select2-selection,
.needs-validation ~ span > .select2-dropdown{
  border-color:red !important;
}

.is-invalid .select2-selection выбирает верхнюю часть раскрывающегося списка, а второй класс (.needs-validation ~ span > .select2-dropdown) выбирает фактический раскрывающийся список. Обратите внимание, что я добавил .needs-validation к div верхнего уровня после проверки формы, вы можете просто переключить его на was-validated

https://getbootstrap.com/docs/4.0/components/forms/#validation

Вот скрипка

Answer 2

Вы пытались добавить! Важные для свойства css?