Bootstrap 4 的 Select2 样式错误

Question

I'm working with Bootstrap 4, and for the <select> elements i want to use Select2 .

The problem is that it does not have a official Bootstrap 4 template, so i was looking and i found this project, which is awesome.

But i having one issue with is-invalid class.

When i use it, the <select> borders change to red when the page loads and then return to its normal state

I try to make a simple class to use with the same Bootstrap color like

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

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

But the result is the same;

You can see the problem in JSFIDDLE

Someone has idea how can i deal with it?

Thanks so much!

Answer 1

The flikcering is because you're adding the class the the select box's class attribute so the style is applied immediately. Afterwards, select2 classes are applied which hides the select box (causing the flicker).

One way around this is to simply apply the class when the document is ready.

$(document).ready(function(){

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

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

});

EDIT: To fix the focus problem you're experiencing you need to over-ride a couple of classes.

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

.is-invalid .select2-selection selects the top part of the dropdown, and the second class ( .needs-validation ~ span > .select2-dropdown ) selects the actual dropdown list. Note that I've added .needs-validation to the top level div once the form is validated you can simply toggle that to was-validated

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

Here is a fiddle

Answer 2

I was able to use some CSS to style a red boarder

.is-invalid + .select2-container--bootstrap .select2-selection--single {
    border: 1px solid #f44336;
}

Answer 3

您是否尝试将 !important 添加到 css 属性？