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 屬性？