How to add unique ID to select2 dropdown

Question

I am having an issue where I have multiple select's on the page and we are using select2. I would like to style just this one specific select but i'm having trouble making it unique so I can add some CSS. I can get the ID to be added to the container, but what is actually happening is when the dropdown is opened, the code is added at the very bottom of the body so I am unable to target it with an ID or css without applying it to every single select.

How can I get an id or class added to the code below? I am using select2 v3.4.0. If you open a select on this page you can see what i'm referring to. SELECT 2

<div class="select2-drop select2-display-none select2-drop-active select2-with-searchbox" style="display: block; top: 468px; left: 627.078px; width: 252px;" id="select2-drop">
    <div class="select2-search">
        <input type="text" autocomplete="off" autocorrect="off" autocapitilize="off" spellcheck="false" class="select2-input"> </div>
    <ul class="select2-results">
        <li class="select2-results-dept-0 select2-result select2-result-selectable select2-highlighted">
            <div class="select2-result-label"><span class="select2-match"></span>Standard Vehicle</div>
        </li>
        <li class="select2-results-dept-0 select2-result select2-result-unselectable select2-disabled">
            <div class="select2-result-label"><span class="select2-match"></span></div>
        </li>
        <li class="select2-results-dept-0 select2-result select2-result-selectable">
            <div class="select2-result-label"><span class="select2-match"></span>Motorcycles &amp; Scooters</div>
        </li>
    </ul>
</div>

Patricide

so I am unable to target it with an ID or css without applying it to every single select. why? the DOM should be accessible normally at the bottom. – Spinks

@ZakariaAcharki, that chunk of code isn't being added to the DOM until you click the select to open it. – Patricide

@DaveOz When I add the class in the HTML on the actual select, it's not carrying over to that bottom section of html. – Patricide

Yes i know.. where's the problem? you have just to target the element with right class/id. please show us an example that reproduce your issue. – Spinks

@ZakariaAcharki here's an example. codepen.io/johnsonjpj/pen/EZMRKG For instance, if I wanted to style something in that <div class="select2-drop"> how could i if it isn't unique? I'll have other selects on the page and any css i add will apply to all. – Patricide

Check my answer @Jacop. – Spinks

Answer 1

Updated codepin.

From the Documentation - Constructor parameters part, You could use dropdownCssClass parameter to give a specific custom class to the select list you want :

$("#my-id").select2({
    dropdownCssClass: "custom-dropdown"
});

Hope this helps.

Spinks

You must use the full version of Select2 (select2.full.js) in order to support the containerCssClass option. – Sarcasm