How to change the css of color of select2 tags?

Question

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 ta

Answer 1

I use below

    .form-control{
        border: 1px solid #cccccc!important;
    }
    .select2-container .select2-selection--single {
        height: 48px !important;
        padding: 10px;
        border-radius: 0px;
        border: 1px solid #cccccc;
    }
    .select2-container .select2-selection--multiple {
        height: 48px !important;
        padding: 5px;
        border-radius: 0px;
        border: 1px solid #cccccc;
    }

Answer 2

For formatting the tags you can use the function formatSelectionCssClass.

$("#mySelect").select2({
    formatSelectionCssClass: function (data, container) { return "myCssClass"; },
});

Or you could add a css class based on the option id:

$("#mySelect").select2({
    formatSelectionCssClass: function (data, container) { return data.id; },
});

Remember that you will need to override both filter and background_color in your css class