javascript - cssによるjqueryのselect2コンポーネントのカスタマイズ

Question

select2 をカスタマイズする方法がわかりません。いくつかの例またはそれについて説明しているリソースへのリンクを教えてください。スタックオーバーフローとグーグルのどこにも見つからない

特に、この検索ボックスを変更する方法に興味があります。

Answer 1

また、ウィジェットをカスタマイズしたかったので、最終的には次のようになりました。

テーマのサポートがないため、後に次のコードを含めることにしましたselect2.css

/* _select2-custom.scss */

/* Applies to container when is shown above and below */
.select2-container,
.select2-dropdown-open.select2-drop-above {

    width: auto !important;
    /* Button */
    > a.select2-choice 
        {
        /* require bootstrap-sass */
        //@extend .btn;
        line-height: 26px;
        padding:0 4px 0 4px;

        /* Button Text */
        .select2-chosen{
            width:100%;
            padding-left: 12px;
            padding-right: 12px;
            margin-right: 12px;
            text-align: left;
            //color:$gray;

            /* Text Without Selection */
            &.select2-default{
                //color:$grayLighter;
            }
        }

        /* Button arrow */
        .select2-arrow{
            border-color:#BBB;
            background:none;
        }
    }
}

/* When button is :hover or :active */
.select2-container-active {
        > a.select2-choices, 
        > a.select2-choice{
            border-color: rgba(168, 168, 168, 0.8);
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(168, 168, 168, 0.6);
            transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
        }
}

/* Delete Button */
.select2-container.select2-allowclear .select2-choice .select2-chosen{
    margin-right: 24px;
}

/* Selection */
.select2-drop,
.select2-drop.select2-drop-above,
.select2-drop-active {
    border: 1px solid red;
    border-radius: 2px;

    margin-top:4px;
    margin-bottom:4px;

    /*      */
    min-width: 180px !important;
}

.select2-results{

    li + li { border-top:1px solid green; }

    .select2-no-results{
        color:yellow;
        background-color: transparent;
    }

    .extra{ 
        display:block;
    }
}

.select2-search{
    background-color: orange;
    padding-left: 6px;
    padding-right: 6px;
    padding-top: 10px;

    /* Search input field */
    input[type=text],
    input[type=text]:focus{
        box-shadow:none;
        border-color: purple;
    }
}

注意すべき点がいくつかあります。

• すべてのセレクターは、同等以上の特異性を持っている必要があります。
• .select-dropプラグインによってインラインで設定されるため、適用される !important 修飾子を含める必要がある可能性がある他のルールの幅。