web-dev-qa-db-ja.com

select2タグの色のCSSを変更するにはどうすればよいですか？

選択ボックスから複数のタグを表示するためにプロジェクトを使い始めたばかりですが、ライブラリに感謝します。

複数値の選択ボックスに表示されるタグの色またはCSSを変更するだけです。現在、タグの色は灰色で表示されていますが、タグの種類に応じて他の色に変更したいと思います。または、少なくともデフォルトの色を変更する方法はありますか？

また、タグのCSSクラスを変更することは可能ですか？ formatResultCssClassなどのオプションがありますが、そのプロパティを使用してcssクラスを追加しようとしたときに何も変更されなかった場合、これを行う方法の例を誰かに示すことができれば幸いです。

編集：問題を解決するための回避策：選択したオブジェクトのクラスを表すために、select2.defaultsに新しいプロパティを追加します。

$.fn.select2.defaults = {
...
    selectedTagClass: "",
...
}

addSelectedChoice: function (data) {
        var choice=$(
            "<li class='select2-search-choice " + this.opts.selectedTagClass + "'>" +
            "    <div><a href='#' onclick='return false;' class='select2-search-choice-close' tabindex='-1'><i class='icon-remove icon-white'/></a></div>" +
            "</li>"),
        id = this.id(data),
        val = this.getVal(),
        formatted;
...

そして、この新しいプロパティを使用してselect2を初期化します。

$(".#select2Input").select2({placeholder: "Please Select Country", 
                    selectedTagClass: 'label label-info', // label label-info are css classes that will be used for selected elements
                    formatNoMatches: function () { return "There isn't any country similar to entered query"; }
                });
csstwitter-bootstrapjquery-select2jquery-select2-4
14
cubbuk

まず、select2の内部にあるCSSをオーバーライドしていることを意味する警告です。select2コードが後日変更される場合は、コードも変更する必要がありますです。現時点ではformatChoiceCSSメソッドはありません（便利ですが）。

デフォルトの色を変更するには、このCSSクラスを持つタグのさまざまなCSSプロパティをオーバーライドする必要があります。

.select2-search-choice {
    background-color: #56a600;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#eeeeee', GradientType=0 );
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eeeeee));
    background-image: -webkit-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
    background-image: -moz-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
    background-image: -o-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
    background-image: -ms-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
    background-image: linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
    -webkit-box-shadow: 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05);
    -moz-box-shadow: 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05);
    box-shadow: 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05);
    color: #333;
    border: 1px solid #aaaaaa;
}

テキストまたはタグのオプション番号に基づいて各タグのクラスを変更するには、変更イベントを追加する必要があります。

$("#select2_element").on("change", function(e) { 
      if (e.added) {
          // You can add other filters here like
          // if e.val == option_x_of_interest or
          // if e.added.text == some_text_of_interest
          // Then add a custom CSS class my-custom-css to the <li> added
          $('.select2-search-choice:not(.my-custom-css)', this).addClass('my-custom-css');
      }
});

そして、あなたはこのクラスでカスタム背景色などを定義することができます：

li.my-custom-css {
       background-color: // etc etc
}
7
mccannf

タグをフォーマットするには、関数formatSelectionCssClassを使用できます。

$("#mySelect").select2({
    formatSelectionCssClass: function (data, container) { return "myCssClass"; },
});

または、オプションIDに基づいてCSSクラスを追加することもできます。

$("#mySelect").select2({
    formatSelectionCssClass: function (data, container) { return data.id; },
});

あなたのCSSクラスでfilterとbackground_colorの両方をオーバーライドする必要があることに注意してください

18
trgt

私の場合、「選択された」タグと追加されたタグの違いを示す必要がありました。

ここでのヘルプは、select2の以前のバージョン用であり、あまり役に立ちませんでした。現在の4.0バージョン（ひどくまばらなドキュメントを使用）を使用して、テンプレート関数と少しの「賢さ」を使用してこれを実現できました。

最初のステップは、結果をテンプレート化することです（すべての選択または削除アクションで、これはボックス内のすべての選択に対して発生することに注意してください）。これは通常、結果のLIに入るテキストだけを返します...ただし、そのテキストをスパンでラップし（オブジェクトを返すことでHTMLを削除しないようにS2に指示）、タイプのカスタムCSSクラスを使用します。私の例では、selectedプロパティを使用してこれを決定します。

$('.select2_sortable').select2({
    tags: true,
    templateSelection: function(selection) {
        if(selection.selected) {
            return $.parseHTML('<span class="im_selected">' + selection.text + '</span>');
        }
        else {
            return $.parseHTML('<span class="im_writein">' + selection.text + '</span>');
        }
    }
});

アイテムを選択した後のHTMLは次のようになります。

<ul class="select2-selection__rendered ui-sortable" id="select2_rendered_smartselectbox_4">
    <li class="select2-selection__choice" title="John Doe">
        <span class="select2-selection__choice__remove" role="presentation">×</span>
        <span class="im_selected">John Doe</span>
    </li>
    <li class="select2-selection__choice" title="fdfsdfds">
        <span class="select2-selection__choice__remove" role="presentation">×</span>
    <span class="im_writein">fdfsdfds</span>
    </li>
    <li class="select2-search select2-search--inline ui-sortable-handle">
        <input class="select2-search__field" type="search" tabindex="-1" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" role="textbox" placeholder="" style="width: 0.75em;">
    </li>
</ul>

ただし、スパンの子ではなく親のLIにアクセスする必要があるため、これでは不十分です。また、CSSでは親セレクターが許可されていないため、それを実現するにはjQueryを実行する必要があります。これらは再描画されるため、Select2アイテムのselectおよびremoveイベントの両方でこの関数を実行する必要があります。

$('.select2_sortable').on("select2:select", function (ev) {
    updateSelectedParents();
});
$('.select2_sortable').on("select2:removed", function (ev) {
    updateSelectedParents();
});

function updateSelectedParents() {
    $('.im_selected').closest('li').addClass('im_connected_item');
    $('.im_writein').closest('li').addClass('im_writein_item');
}

最後に結果：

<ul class="select2-selection__rendered ui-sortable" id="select2_rendered_smartselectbox_4">
    <li class="select2-selection__choice im_connected_item" title="John Doe">
        <span class="select2-selection__choice__remove" role="presentation">×</span>
        <span class="im_selected">John Doe</span>
    </li>
    <li class="select2-selection__choice im_writein_item" title="fdfsdfds">
        <span class="select2-selection__choice__remove" role="presentation">×</span>
    <span class="im_writein">fdfsdfds</span>
    </li>
    <li class="select2-search select2-search--inline ui-sortable-handle">
        <input class="select2-search__field" type="search" tabindex="-1" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" role="textbox" placeholder="" style="width: 0.75em;">
    </li>
</ul>

また、im_writein_itemおよびim_connected_item CSSクラスに基づいて要素のスタイルを設定できます。

3
Denny

次のようにタグコンテナにアクセスできます。

formatSelectionCssClass = function(tag, container) {
    $(container).parent().addClass("my-css-class");
};
2
Leo

formatResultCssClass、containerCssClassおよびdropdownCssClassオプションを使用してコードでクラスを指定し、adaptContainerCssClassおよびadaptDropdownCssClassオプションを使用してマークアップでクラスを指定します。または、containerCssおよびdropdownCssオプションを使用して、コードでインラインスタイルを指定することもできます。

なぜそれらを使用しなかったのか疑問に思っている場合、それらは 正しく文書化されていません 少し前です。

参照：< http://ivaynberg.github.io/select2/ >

1
tne

一部のselect2ボックスの色のみを変更したい場合：

Select2-choiceのSelect2 CSSプロパティを直接変更する代わりに、select2によって生成されたIDをselect2 div（これは＃s2id_yourelementidになります）に使用して、select2-choiceクラスを持つ子を選択します。

たとえば、Select2を適用する要素#myelementを変更したい場合、色を変更するには、CSSに次を追加します。

#s2id_myelement > .select2-choice{
     background-color:blue;
}
1
ManGI1

以下を使用します

    .form-control{
        border: 1px solid #cccccc!important;
    }
    .select2-container .select2-selection--single {
        height: 48px !important;
        padding: 10px;
        border-radius: 0px;
        border: 1px solid #cccccc;
    }
    .select2-container .select2-selection--multiple {
        height: 48px !important;
        padding: 5px;
        border-radius: 0px;
        border: 1px solid #cccccc;
    }
0
Mohammad Maseeh Uzzama

このCSSの追加は私にとってうまくいきました：

.select2-selection__choice {
  background-color: red !important;
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#eeeeee', GradientType=0);
  background-image: -webkit-linear-gradient(top, red 25%, yellow 52%, green 25%, purple 100%) !important;
  background-image: -moz-linear-gradient(top, red 25%, yellow 52%, green 25%, purple 100%) !important;
  background-image: -o-linear-gradient(top, red 25%, yellow 52%, green 25%, purple 100%) !important;
  background-image: -ms-linear-gradient(top, red 25%, yellow 52%, green 25%, purple 100%) !important;
  background-image: linear-gradient(top, red 25%, yellow 52%, green 25%, purple 100%) !important;
  -webkit-box-shadow: 0 0 2px #ffffff inset, 0 1px 0 rgba(0, 0, 0, 0.05) !important;
  -moz-box-shadow: 0 0 2px #ffffff inset, 0 1px 0 rgba(0, 0, 0, 0.05) !important;
  box-shadow: 0 0 2px #ffffff inset, 0 1px 0 rgba(0, 0, 0, 0.05) !important;
  color: white !important;
  border: 1px solid #aaaaaa !important;
}

フィドルの例：

http://jsfiddle.net/sajjansarkar/hvsvcc5r/

（はい私は私のポイントを示すために色に夢中になりました;-））

0
Sajjan Sarkar