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

这是一个小提琴