Need an additional custom class to select2-container

[justin-johnn]

We need an additional custom class to select2-container container to easily override the inner classes styles.

Like

$("#e2").select2({
customClass: "Myselectbox",
});

So that corresponding container will formed as

<div class="Myselectbox select2-container select2-container-multi">

So that I can override an inner classes like .Myselectbox .select2-choices in CSS.

Generally this will help to override the textbox(ul.select2-choices) style.

[ivaynberg]

there were already options to do this, but they were undocumented. i just added the missing docs. see containerCss containerCssClass dropdownCss dropdownCssClass optons in the docs. containerCssClass is what you want.

[justin-johnn]

The Version 3.0 only holds these options. Please upgrade who uses lesser versions ...

[imlunek]

I am using version 4.0.2. And on using containerCssClass it adds class to select2-selection. I guess the class is supposed to be added to the main wrapper select2-container.

Or, Is there any other way to add class to the main wrapper select2-container?

[Bartkowski]

The issue @imlunek mentioned still persists in 4.0.3. Is it intentional?

[imlunek]

@Wilwarin. The containerCssClass thing seems to work properly with stable version.

[Bartkowski]

@imlunek is there a way to add css class to the select2-container element? the containerCssClass adds the class to select2-selection

[berkandirim]

If you're using data attributes:

        $('[data-container-css-class]').each(function() {
           var className = $(this).attr('data-container-css-class');
           var container = $(this).next('.select2-container');
           container.addClass(className);
           container.find('.select2-selection').removeClass(className);
        });

[pranavk]

Facing the same problem; using containerCssClass adds the class to select2-selection, not select2-container .

[andrejpavlovic]

This will do the trick:

$('select').select2().data('select2').$dropdown.addClass('my-container');

[alexweissman]

add class to the main wrapper select2-container

Since this appears to be a fairly common request, I'm going to reopen this as a feature/documentation request.