jquery customize select2 component by css

Question

I cant figure out how do I customize select2. Can you please give some examples or links to the resources that explain about it. I can't find anywhere on stackoverflow and google

Particularly I'm interested how to change this search box.

Answer 1

I also wanted to customize the widget and ended up with this:

Since there is no theme support I decided to include the following code after 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;
    }
}

There are some things to keep in mind:

• All selectors must have equal or higher specificity.
• The width of .select-drop and maybe other rules must include the !important modifier to be applied, because they are set inline by the plugin.