Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Change the colour of Select2 glow

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?

like image 783
Gottfried Avatar asked Jan 27 '14 14:01

Gottfried


1 Answers

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/

like image 90
Irvin Dominin Avatar answered Oct 19 '22 12:10

Irvin Dominin