Bootstrap 4 的错误样式 Select2

Posted 2023-05-07

【中文标题】Bootstrap 4 的错误样式 Select2

【英文标题】：Error styling Select2 for Bootstrap 4

【发布时间】：2018-10-13 20:11:47

【问题描述】：

我正在使用 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

有人知道我该如何处理？

非常感谢！

【问题讨论】：

当使用 select2 时，原来的 select 元素被“隐藏”了，这就是为什么你会得到最初是红色边框的印象，然后在 select2 渲染时又恢复正常。使用一点 JS，您可以检查您的原始选择是否具有“无效”类并将其应用于 select2 元素。

我很好奇，你为什么默认应用is-invalid？

@funkysoul 太棒了！我会试试的：D

@JonathanChaplin 我申请测试；我正在使用带有 ModelState 的 asp.net mvc 来确定该类是否必须存在：D

@funkysoul 我正在尝试，这很有效，我只有一个悬停问题，你有什么想法来检测该跨度的打开以再次添加 is-invalid 类吗？太棒了！

【参考方案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

Here is a fiddle

【讨论】：

感谢您的回复！我正在看它，但我在 jsfiddle 中看到它没有边界，它必须看起来像这样 jsfiddle.net/ao9bu15h/3

我明白了。给我一秒钟。

我几乎解决了 funkysoul i>评论，我用边界打开时与边界一起战斗：p span>

在你的 document.ready 中试试这个：$("#combo + span").addClass("is-invalid");

它的工作，我正在做类似的事情，$('select.is-invalid.select2-hidden-accessible').each(function() $(this).next('span').addClass('is-invalid');); 但问题是在打开选择时添加 is-invalid:focus，谢谢！！

【参考方案2】：

我可以使用一些 CSS 来设置红色边框的样式

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

【讨论】：

使用 Bootstrap 4：.is-invalid + .select2-container--bootstrap4 .select2-selection--single border: 2px solid #dc3545;

【参考方案3】：

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

【讨论】：

是的，但这不是解决方案 :'( 感谢您的回复！