Demo and my code is like this : /

My javascript code is like this :

var select02 = $('#select02');

$(select02).select2({
    data: [{
        id: 0,
        text: "test01"
    }, {
        id: 1,
        text: "test02"
    }, {
        id: 2,
        text: "test03"
    }, {
        id: 3,
        text: "test04"
    }, {
        id: 4,
        text: "test05"
    }],
     placeholder: "Branch name",
});

I want change the background color of select2 to blue color

I want change the background color using javascript

Whether it can be done?

Thank you

Demo and my code is like this : http://jsfiddle/fc1qevem/10/

My javascript code is like this :

var select02 = $('#select02');

$(select02).select2({
    data: [{
        id: 0,
        text: "test01"
    }, {
        id: 1,
        text: "test02"
    }, {
        id: 2,
        text: "test03"
    }, {
        id: 3,
        text: "test04"
    }, {
        id: 4,
        text: "test05"
    }],
     placeholder: "Branch name",
});

I want change the background color of select2 to blue color

I want change the background color using javascript

Whether it can be done?

Thank you

• javascript
• jquery
• html
• css
• jquery-select2

• .select2-search input{ background-color: blue; } try this in your css – user2042292 Commented May 23, 2016 at 9:46
• @Karthikeyan, If css can be placed in javascript? – moses toh Commented May 23, 2016 at 10:04
• $('.select2-selection').css('background-color', 'blue'); @moses t you can try this. – user2042292 Commented May 23, 2016 at 10:06

5 Answers 5

add this in your css

.select2-selection{
  background-color:blue !important;
}

js solution

 $(select02).select2({
    data: [{
        id: 0,
        text: "test01"
    }, {
        id: 1,
        text: "test02"
    }, {
        id: 2,
        text: "test03"
    }, {
        id: 3,
        text: "test04"
    }, {
        id: 4,
        text: "test05"
    }],
     placeholder: "Branch name",
}).data("select2").$container.find(".select2-selection").css('background-color', 'blue');

I use it this way and it works very well:

$("#select02").siblings('.select2').children('.selection').children('.select2-selection').css('background-color', 'blue')

When you will change the background-color using JavaScript try this:

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

// Css code
.bg_color {
     background-color: blue !important;
}

// Javascript code
// just put this code under the load function

$(select02).select2({ containerCssClass: "bg_color " });

This is how select2 adding class to the container or default css ".select2-container--default .select2-selection--single" of select2 where you can edit the background color of the container. Hope it helps you.

Try the code below:-

document.getElementById("select02").style.backgroundColor="blue";