Bootstrap 4 的 Select2 样式错误

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

闪烁是因为您将类添加到选择框的类属性中，以便立即应用样式。 之后，应用 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 来设计红色寄宿生的样式

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

Answer 3

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