javascript - jquery通过css自定义select2组件

Question

我不知道如何自定义 select2。您能否提供一些示例或链接到解释它的资源。我在 stackoverflow 和谷歌上找不到任何地方

特别是我对如何更改此搜索框感兴趣。

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 修饰符，因为它们是由插件内联设置的。