How to change color of selection in Select2 4.0.1?

Tags: jquery,html,css,jquery-select2

Problem :

Hello i'm trying to figure out how to change the color of the selection (only if selected by user, placeholder has to be in default color - white) with select2 4.0.1

this is how it should look like in default, 3rd pic (first two are selected) enter image description here

and after selection it should look like : enter image description here

I know how to set CSS for select2 3.5.x but recently we've decided to update our select 2 and i'm struggling ...

original CSS for select2

.select2-container .select2-choice:not(.select2-default) {
background-image: none;
background-color: #D9FFC7;}

anyone? thanks for reply

working jsfiddle

Solution :

Looks like you just have to add an !important to the background-image property, or make sure your custom CSS is included in your page after you include the select2 CSS.

.select2-container .select2-choice:not(.select2-default) {
    background-image: none !important;
    background-color: #D9FFC7;


Ok, looks like your JSFiddle was using the previous version of select2 when I was editing it. Now I see your problem.

Trying to stick with a pure CSS solution, I have come up with this:

.select2-selection {
    overflow: hidden;

.select2-selection__rendered[title] {
    background-color: #D9FFC7;

This will target the element that updates when you make a selection - a title attribute gets added to the .select2-selection__rendered element when you choose an option from the dropdown, so the above CSS will change the background colour when there is a title attribute present.

The overflow: hidden property is in there because when you change the background colour of that element, it spills out of the parent's element.

The flaw in this set up is that if you clear the selection, the title attribute stays there with the last option you had selected, meaning the field is left with the background coloured.

    CSS Howto..

    How do I set two values for IE's `filter` property?

    How to align dropdown sub menu?

    How to build this layout with CSS?

    How to reuse CSS selector?

    Couldn't understand CSS selectors meaning in the juizy slideshow stylesheet code

    CSS: How do I get my “send” button to line up (move up) and size up (scale) properly?

    How can I use JQuery toggle for multile DIVs?

    How to add row highlight using html, css, and javascript?

    How to center align circles?

    CSS - how to make the end of the word blurry?

    How to style google cse

    How to get CSS Variables working in Dart

    how to center and Crop an image to square with CSS

    How To Layout a Grid in CSS

    How to use jQuery to check if element breaks to the next line?

    How to make last element in a series of wrapped inline-block elements fill the available horizontal space?

    How to achieve straight shadow with CSS?

    How to show Bootstrap 3 popover scroll only when needed

    How to add more bars to this Animated JQuery, CSS and HTML Bar Graph

    How to force division into equal parts using flexbox

    How to expand link on hoover? Add “<” “>” symbols around link?

    Google Font API uses browser detection. How to get all font variations for font-face

    CSS: How to change spacing between radio button and it's text?

    How to display a portion of an image with CSS?

    How to display two forms next to each other

    How come the exact same version of Google Chrome shows different layout?

    I have a simple image picture slider with JQuery, but I do not know how to animate up or down

    How to retain CSS transform scale on checked state

    Show/Hide & Change CSS functions are not working

    How Do I Modify My Linear Gradient Width to 100%?