0

I have an ordinary select box that I change to a fancy select2. Now, I want to apply a certain style attribute to it.

$('#myID').select2();
$('#myID').css('background-color','red');

This simple approach does not work. What is the solution?

Lokomotywa
  • 2,624
  • 8
  • 44
  • 73
  • Try the below link https://stackoverflow.com/questions/2655925/how-to-apply-important-using-css – meda Shiva Jun 12 '18 at 13:44
  • I don't believe the way you have this written will work because you are applying the css to the original control (select or input tag) not the html elements that were added to render the select2. The original control is hidden so applying style to it isn't really useful. – MikeS Jun 12 '18 at 13:46
  • Of course this does not work. That is what this question is about. How do I apply the style to the span that select2 creates then? – Lokomotywa Jun 12 '18 at 13:50

4 Answers4

3

I found the solution on my own:

$('#select2-'+myID+'-container').parent().css('background-color', 'red');
Lokomotywa
  • 2,624
  • 8
  • 44
  • 73
1

This has been answered before and has caught me out more than once, you want to be editing the Select2 css files as the styling of the select element will be over-written. Or create a new theme for it.

.select2-search { background-color: #00f; }

or for a specific ID 

#myID.select2-search { background-color: #00f; }

Stack Overflow Similar Question

Pheonix2105
  • 1,001
  • 2
  • 9
  • 24
  • I dont want to apply this style to every select2 but only to a specific one that I identify by Id – Lokomotywa Jun 12 '18 at 14:00
  • You can make the css selector only apply to the correct element by specific an id as well as class. #myID.select2-search { background-color: #00f; } – Pheonix2105 Jun 12 '18 at 14:04
  • unfortunately, the select2-search element does not have the id of the original select. How do I get the proper Id? – Lokomotywa Jun 12 '18 at 14:06
  • Could you post the code of the select element HTML and the relevant javascript? It seems to me if you're trying to get the ID via script (rather than setting it in the html) then you may as well just use a reference to the select2 element you create and use jquery to modify it. var mySelect2 = $('#myID').select2(); At this point mySelect2 is just another Jquery object with extra functions and behaviours. So you can pass the reference to .css $(mySelect2).css("background-color", "red"); – Pheonix2105 Jun 12 '18 at 14:15
1

That's because with the select2(); command you've transformed your #myID to a select2 object and it no longer acts as a simple <select> id!

Your jQuery should look something like this instead

$($('#myID').data('select2')).css('background-color', 'red');

(Can't unfortunately test it myself right now, as jsfiddle doesn't support select2)

Samuel Hulla
  • 6,617
  • 7
  • 36
  • 70
0

I could apply style to select2 this way:

$('#MyID').siblings('.select2').children('.selection').children('.select2-selection').css('border-color', 'red')
M. Radinmehr
  • 72
  • 4