Change the colour of Select2 glow

Question

When using a Select2 select box it glows blue when active and I would like to know what CSS is required to change that color?

Butterfield

Answer 1

By inspecting the code I see that you can override using !important these CSS rules.

Code (of my demo):

.select2-drop-active {
    border: 1px solid rgba(210, 100, 10, 1.8);
    border-top: none;
}

.select2-drop.select2-drop-above.select2-drop-active {
    border-top: 1px solid rgba(210, 100, 10, 1.8);
}

.select2-container-active .select2-choice,
.select2-container-active .select2-choices {
    border: 1px solid rgba(210, 100, 10, 1.8);
    outline: none;

    -webkit-box-shadow: 0 0 10px rgba(210, 100, 10, 1.8);
            box-shadow: 0 0 10px rgba(210, 100, 10, 1.8);
}

Demo: http://jsfiddle.net/IrvinDominin/tmpLw/

Chervonets