引导程序 4 的样式设置选择2 时出错

Question

我正在使用 Bootstrap 4，对于<select>元素，我想使用 Select2。

问题是它没有官方的 Bootstrap 4 模板，所以我正在寻找并找到了这个项目，这很棒。

但是我对is-invalid课有一个问题。

当我使用它时，页面加载时<select>边框变为红色，然后恢复正常状态

我尝试制作一个简单的类来使用相同的引导颜色，例如

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

但结果是一样的;

您可以在吉斯菲德尔

有人知道我该如何处理它吗？

非常感谢！

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 属性中？