Question

我正在使用Bootstrap 4，而我想要使用的<select>元素Select2。

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

但我对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

有人知道我该如何处理它？</ p>

非常感谢！

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

Here is a fiddle

Answer 2

您是否尝试将重要内容添加到css属性中？

Answer 3

我能够使用一些CSS来设置红色边框

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

错误样式Select2 for Bootstrap 4

3 个答案: