How to change the css of color of select2 tags?


Tags: css,twitter-bootstrap,jquery-select2,jquery-select2-4

Problem :

I just started using project for showing multiple tags from a select box and it works great, thanks for the library.

I just need to modify the color or css of the tags shown in multi-value select-boxes. Right now the color of the tag is shown as grey and I would like to change that to some other color according to the type of the tag. Or at least is there a way to change the default color?

Also is it possible to change the css class of tags? There is an option such as formatResultCssClass but when I tried to add css classes through that property nothing changed, I would appreciate if someone can show an example how to do this?

Edit: Workaround for solving the problem: Add a new property to the select2.defaults for representing classes of selected objects.

$.fn.select2.defaults = {
...
    selectedTagClass: "",
...
}

addSelectedChoice: function (data) {
        var choice=$(
            "<li class='select2-search-choice " + this.opts.selectedTagClass + "'>" +
            "    <div><a href='#' onclick='return false;' class='select2-search-choice-close' tabindex='-1'><i class='icon-remove icon-white'/></a></div>" +
            "</li>"),
        id = this.id(data),
        val = this.getVal(),
        formatted;
...

And initialize select2 using this new property:

$(".#select2Input").select2({placeholder: "Please Select Country", 
                    selectedTagClass: 'label label-info', // label label-info are css classes that will be used for selected elements
                    formatNoMatches: function () { return "There isn't any country similar to entered query"; }
                });


Solution :

First up - a warning that this means you are overriding the CSS that is internal to select2, so if select2 code changes at a later date, you will also have to change your code. There is no formatChoiceCSS method at the moment (though it would be useful).

To change the default color, you will have to override the various CSS properties of the tag which has this CSS class:

.select2-search-choice {
    background-color: #56a600;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#eeeeee', GradientType=0 );
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eeeeee));
    background-image: -webkit-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
    background-image: -moz-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
    background-image: -o-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
    background-image: -ms-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
    background-image: linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
    -webkit-box-shadow: 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05);
    -moz-box-shadow: 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05);
    box-shadow: 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05);
    color: #333;
    border: 1px solid #aaaaaa;
}

To change the class of each tag based on the text or option # of that tag, you will have to add a change event:

$("#select2_element").on("change", function(e) { 
      if (e.added) {
          // You can add other filters here like
          // if e.val == option_x_of_interest or
          // if e.added.text == some_text_of_interest
          // Then add a custom CSS class my-custom-css to the <li> added
          $('.select2-search-choice:not(.my-custom-css)', this).addClass('my-custom-css');
      }
});

And you can define a custom background-color etc in this class:

li.my-custom-css {
       background-color: // etc etc
}

    CSS Howto..

    How to Display a div at same position on a any display irrespective of physical dimensions

    How to change ListView cell's text color in JavaFX using css

    Show a caption with a semi-transparent color overlay when hovering over an image

    How to add a custom font to Rails app?

    How to grow the width of a div as the width screen decreases using Css?

    How to play a second CSS animation once the first one finishes

    How to get 2 fixed and 1 dynamic column in CSS

    How to work with boxes? Html Css

    How to define absolute positioned element's anchor point?

    How to make commandeButon to vertical align?

    How to use psd elements in an upload form? [closed]

    How to place divs three in a row with css and html

    sencha touch 2.0 : How to apply conditional background color to list item

    how to stretch an image in background css property

    How to use conditional CSS for IE browser in drupal6?

    How to match a comment node with the Jsoup selector api?

    How to not lose the css while appending html to an element?

    How to make a dynamic layout only by CSS

    AngularDart - How to style Component with global CSS in Google Chrome 35m (applyAuthorStyles is deprecated)

    How to use jQuery UI icons without buttons?

    How to open a CSS-only popup automatically on page load/using Javascript?

    How to force a TD to be a certain height with CSS?

    How do I download many of the same pictures fewer times with html, css, jquery, etc.?

    How do I stop css pushing
  • to the right?
  • How to align elements equally in a line in CSS/Bootstrap?

    How to create a clickable block?

    How to make Superfish menu vertical in first level but horizontal in second level?

    CSS how to target background and make it transparent

    How can I get an image to always appear to the right of some associated text using HTML and/or CSS?

    How do I create two columns using CSS?