Demo and my code is like this : http://jsfiddle.net/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
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');
When you will change the background-color using JavaScript try this:
$('.select2-selection').css('background-color', 'blue');
尝试以下代码:-
document.getElementById("select02").style.backgroundColor="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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.