Utilize select2 to add custom styles to select elements

Question

Utilize select2 to add custom styles to select elements

One issue I'm facing is that when I use select2 from the cdn with my select multiple input, the specific styles I apply to this select no longer show up. No matter if I specify these styles via id or class, they disappear once I add $('select').select2(); in my JavaScript code.

This is how I am implementing it:

$('select').select2();

Here's my HTML:

<select id = "cars" name="cars[]" multiple = "multiple" required = "required">

And here is the CSS styling for the select:

#cars{
   background-color:red !important;
}

Any suggestions on how to resolve this issue and make sure the specified styles are not overridden by select2?

jquery html css jquery-select2

Answer 1

Answer №1

When using Select2, the selects are hidden and re-rendered.

Check out this example fiddle with a red background

Here is the CSS that was applied:

.select2-drop {
  background: red; /* !important not required */
}

View another fiddle with a newer version of Select2 (4.0.3)

CSS applied in this case:

.select2-dropdown {
  background: red;
}

Answer 2

When using Select2, the selects are hidden and re-rendered.

Check out this example fiddle with a red background

Here is the CSS that was applied:

.select2-drop {
  background: red; /* !important not required */
}

View another fiddle with a newer version of Select2 (4.0.3)

CSS applied in this case:

.select2-dropdown {
  background: red;
}

Answer 3

Answer №2

Let's hide the select2 set select display and generate an element that looks like this:

<span class="select2 select2-container select2-container--default select2-container--below select2-container--focus" dir="rtl" style="width: 97px;"><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-c968-container"><span class="select2-selection__rendered" id="select2-c968-container" title="ظرفیت - بیشترین">ظرفیت - بیشترین</span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>

To modify the style, you'll need to inspect the element as setting select { ... } won't work since the select element is hidden by select2.js.

Answer 4

Let's hide the select2 set select display and generate an element that looks like this:

<span class="select2 select2-container select2-container--default select2-container--below select2-container--focus" dir="rtl" style="width: 97px;"><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-c968-container"><span class="select2-selection__rendered" id="select2-c968-container" title="ظرفیت - بیشترین">ظرفیت - بیشترین</span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>

To modify the style, you'll need to inspect the element as setting select { ... } won't work since the select element is hidden by select2.js.

Utilize select2 to add custom styles to select elements

Answer №1

Answer №2

Similar questions

Is it possible for webpack to combine css/scss/less files without creating duplicate entries for required files?

Is it conceivable that Rails may be rendering HTML at a slower rate compared to static

Displaying CSS source on a webpage using Polymer 2.0 style modules for sharing styles

What sets apart Material UI's gutterBottom from a paragraph?

Tips for ensuring the final row remains fixed at the bottom of the table while maintaining a minimal body height:

Create a versatile 1, 2, 3 column layout that seamlessly transitions from mobile to desktop using Flex

Issues with jQuery.ajax functionality have been reported across all versions of Internet Explorer

Challenges in designing a comment system using JavaScript

Highcharts: Show tooltip above all elements

Issue with margin-top in combination with clear:both does not function as expected

How about incorporating a randomized, dynamic background image that adjusts to different screen sizes and proportions

Issues with foundation tab functionality in the section

Using PHP to extract information from an HTML checkbox and select the relevant query

Is there a method to loop through elements that share the same ID?

Stop webpage loading with -webkit-transform

Does anyone know if it's achievable to include a background position within the img /asp:image tag?

Setting focus on an input box using programmatic methods triggered by the ItemInvoked event in a ListView in a Windows 8 Metro HTML5 environment

Ways to adjust the size of v-btn

Tips for creating a responsive Material UI TextField that adjusts to zooming in and out

completing data tables and presenting them to clients