jquery - Change select 2 version 4 border color when it is opened

Question

I have tried to change the border color of select 2 version 4 with when it is opened:

.select2-dropdown--above {
    border: 1px solid blue !important;;
    border-bottom: none !important;  

}

.select2-dropdown--below{
    border: 1px solid blue !important;;
    border-top: none !important;     

}

Code at: http://jsfiddle.net/7c0Lm033/

Here is what I get:

As you can see I can not change the color of select 2 head color. I could not find any unique selector which can change the marked color border.

Answer 1

您可以将其添加到您的 CSS：

span.select2-selection--multiple[aria-expanded=true] {
    border-color: blue !important;   
}

见小提琴

Answer 2

看这个例子：http: //jsfiddle.net/kevalbhatt18/7c0Lm033/2/

覆盖select2的css

.select2-container--default.select2-container--focus .select2-selection--multiple{
   border: 1px solid blue !important;;

}

Answer 3

我认为您可以简单地使用以下代码通过下面的单行代码使箭头指向蓝色的区域

$('.select2-selection').css('border-color','blue');

希望它有一个目的