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..

    my website not worked in Ipad and how I can fix some small issue? [closed]

    How can I trigger jQuery fadeIn() fadeOut() from a

    How to Create Grid/Tile View with CSS?

    how to select an anchor tag with a specific id inside a ul using css

    How can display table-row behave like colspan=3

    How to find the proper offsets for CSS sprites?

    HTML & CSS: How to put quotation mark and text in same height?

    How to assign CSS background image properties mixing classes and ids

    How to capture hover events on css (less) box-shadow

    How to set the overall Grid thumbnail height to be equal?

    CSS - How to center a DIV menu

    How to make a menu have submenus in pure CSS

    How to position this div next to others?

    How to arrange/align two paragraphs into boxes [duplicate]

    How to edit WordPress CSS written as inline CSS? [duplicate]

    How do you center a picture AND left align text that is touching said picture? HTML5

    How to put a menu over the full width of the page using HTML and CSS?

    How do I center this form-button block?

    How to set the background-image of this text to an svg?

    how to vertically align footer contents with css

    How to assign CSS to mobile page in

    How to change/add CSS inside of iframe by jQuery

    How to separate a table cell into two equal parts with different background via css?

    How to create a dotted shadowy effect on an image with CSS?

    How to show a small image to the right of a div with CSS?

    How to properly align rows with bootstrap

    How to create image curved using css or jquery (See picture)

    Creating an animated image slider - how to animate and restrict multiple clicks?

    How can i make this css star smaller?

    How to code CSS for all browsers in jQuery.css() method?