Question

73

How to add a specific class to select2 drop element?

rated 0 times [ 78] [ 5] / answers: 1 / hits: 52340 / 9 Years ago, fri, november 13, 2015, 12:00:00

I have select2 customized via css with its general classes and ids.

Now, I'm trying to customize a specific class that will be provided to select2 and then apply in css to it.

My issue: is NOT the select per say but the drop of it ( the div with the class select2-drop ) that is appended to the body, how can i access that one?

I've already tried:

$(.element).select2({

   minimumResultsForSearch: -1,

   containerCssClass : error

  }

);

but the class error is not inherited to that div.

UPDATE:
This is the graphic element i'm talking about ( the options area ):

And this is the code in the inspected where i want to add that specific class, so i can play with it in CSS:

UPDATE: jsfiddle

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

freddiejarretk

Add To Favorites

Follow

Total Points: 612

Total Questions: 103

Total Answers: 88

Location: Armenia

Member since Sat, Dec 31, 2022

1 Year ago

answered 9 Years ago tristab · Accepted Answer

You can use dropdownCssClass for adding class to the select2-drop. I read whole plugin to understand what is going on. Finally, I found that option.

 $(".jSelectbox").select2({

     containerCssClass: "error",

     dropdownCssClass: "test"

 });

Update: If it didn't work, try this (way 2):

$select = $(".jSelectbox").select2({});

$select.data('select2').$container.addClass('error');

$select.data('select2').$dropdown.addClass('test');

$(.jSelectbox).select2({

  containerCssClass: error,

  dropdownCssClass: test

});

<script src=https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js></script>

<link href=https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.css rel=stylesheet />

<script src=https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.js></script>

<select class=jSelectbox>

            <option value=AL>Alabama</option>

            <option value=AK>Alaska</option>

            <option value=AZ>Arizona</option>

            <option value=AR>Arkansas</option>

            <option value=CA>California</option>

            <option value=CO>Colorado</option>

            <option value=CT>Connecticut</option>

            <option value=DE>Delaware</option>

            <option value=FL>Florida</option>

            <option value=GA>Georgia</option>

            <option value=HI>Hawaii</option>                   

            <option value=ID>Idaho</option>

            <option value=IL>Illinois</option>

            <option value=IN>Indiana</option>

            <option value=IA>Iowa</option>

            <option value=KS>Kansas</option>

            <option value=KY>Kentucky</option>

            <option value=LA>Louisiana</option>

            <option value=ME>Maine</option>

            <option value=MD>Maryland</option>

            <option value=MA>Massachusetts</option>

            <option value=MI>Michigan</option>

            <option value=MN>Minnesota</option>

            <option value=MS>Mississippi</option>

            <option value=MO>Missouri</option>

            <option value=MT>Montana</option>

            <option value=NE>Nebraska</option>

            <option value=NV>Nevada</option>

            <option value=NH>New Hampshire</option>

            <option value=NJ>New Jersey</option>

            <option value=NM>New Mexico</option>

            <option value=NY>New York</option>

            <option value=NC selected=>North Carolina</option>

            <option value=ND>North Dakota</option>

            <option value=OH>Ohio</option>

            <option value=OK>Oklahoma</option>

            <option value=OR>Oregon</option>

            <option value=PA>Pennsylvania</option>

            <option value=RI>Rhode Island</option>

            <option value=SC>South Carolina</option>

            <option value=SD>South Dakota</option>

            <option value=TX>Texas</option>

            <option value=TN>Tennessee</option>

            <option value=UT>Utah</option>

            <option value=VT>Vermont</option>

            <option value=VA>Virginia</option>

            <option value=WA>Washington</option>

            <option value=WV>West Virginia</option>

            <option value=WI>Wisconsin</option>

            <option value=WY>Wyoming</option>

            </select>

Jsfiddle