web-dev-qa-db-ja.com

Bootstrap select2 error styling

select2の選択メニューがあります。

ストリップバージョンの例：

<div class="form-group has-error">
        <select name="description_id" class="select2">

// <options>

</div>

has-errorをテキスト入力に適用すると、入力の周りに赤い境界線が表示されます。これは、select2メニューでは機能しません。何が欠けていますか？

私はbootstrap3と最新のselect2を使用しています：

https://select2.github.io/

私はこのページを読んで解決策を試しましたが、うまくいきません：

https://xcellerant.net/2013/12/05/adding-bootstrap-error-styling-to-a-select2/

twitter-bootstrap-3stylingselect2
9
Hardist

あなたが投稿したページの解決策は、古いバージョンのselect2。最新バージョンについては、次のCSSコードを使用してください。

.has-error .select2-selection {
    border-color: rgb(185, 74, 72) !important;
}

このコードとhas-errorクラス、適切な赤みを帯びたエラーカラーを取得できます。

<div class="form-group has-error">
 <select name="description_id" class="select2">
  <option>One</option>
  <option>Two</option>
  <option>Three</option>
  <option>Four</option>
 </select>
</div>

Select2 with has-error class

jsFiddleの例： https://jsfiddle.net/k9phxgnd/1/

11
Christos Lytras

Bootstrap 3.3およびSelect2 4.0.6の場合、エラースタイリングは次のように適用できます。

css：

.has-error {border:1px solid rgb(185, 74, 72) !important;}

jquery/javascript：

$('#YourSelect2ControlID').next().find('.select2-selection').addClass('has-error');

Select2コントロールの場合、ボーダースタイルを含むオブジェクトは<select>要素ではなく、<span>要素に続くネストされた<select>要素の1つです。その特定のスパンには、.select2-selectionクラスが含まれています。

1
T3.0