How To Change Background Color Of Select2

Hullo @cqulihui,
take you lot checked whether your CSS selector is correct using the inspector? If not, try it. You tin can use this manual.

@fleb said:
Hi @cqulihui,
take yous checked whether your CSS selector is correct using the inspector? If not, try it. Yous can use this manual.

Thanks @fleb!
I learned this manual and had a try. I found that I could change the font colour of the names of the groups by changing the following code:
.select2-results__group{ background-colour:#8e00ff -webkit-text-fill-color:#00ff7b }
But I don't know where I should put this code, in "Style"-->"CSS" or "Add together javascript"-->"addOnload"?
Thank you for your help!

Hi @cqulihui,
your code is in CSS. Therefore you should put information technology in the CSS. It will change these properties in all select2 questions in your survey. By the way, I think you should apply semicolons after detail declarations. If you desire just one question to be inverse, find id youf this question in the inspector and put it to your selector. Information technology should look lie this at present:

#QID22 .select2-results__group{ background-color:#8e00ff;                                                             -webkit-text-fill-color:#00ff7b;}

In case you want to change all questions of this type at the page simply non other ones, yous'd amend use jQuery and insert the code to the JavaScript. Information technology will look similar this:

jQuery(" .select2-results__group").css("background-color", "#8e00ff "); jQuery(" .select2-results__group").css("-webkit-text-fill-color", "#00ff7b");

Howdy @fleb, thank you for you help!
I tried the lawmaking you lot provided, merely it doesn't work. I am not certain whether there is something wrong in my code elsewhere. Hither is my code:

/Place your JavaScript here to run when the page loads/
jQuery("#"+this.questionId+" select").select2({
placeholder: '请选择',
maximumSelectionLength: 56,
width: "100%",
closeOnSelect: "false"
});

jQuery(" .select2-results__group").css("background-color", "#8e00ff ");
jQuery(" .select2-results__group").css("-webkit-text-fill up-color", "#00ff7b");

And if I put it this way, it yet doesn't piece of work:

/Place your JavaScript here to run when the page loads/
jQuery("#"+this.questionId+" select").select2({
placeholder: '请选择',
maximumSelectionLength: 56,
width: "100%",
closeOnSelect: "false"
});

jQuery("#"+this.questionId).find("select2_results__group").css("groundwork-color", >"#8e00ff ");
jQuery("#"+this.questionId).find("select2_results__group").css("-webkit-text-fill-color", >"#00ff7b");

I don't know what'south incorrect. Is there anything incorrect?
Thanks a lot.

Howdy @cqulihui,
I've never seen this marker > in jQuery. Are you certain it is correct?
I've likewise never tried to change more CSS backdrop in one jQuery, so I don't know whether it is possible.
Have y'all tried to expect to the console log whether there is some error? Here is a brusk video about the console.
I'yard afraid I can't help you without seeing the survey question. I've never I might try it if yous'd put a .qsf file with your question here.
I suppose select2 is your own question, not one of the default ones in Qualtrics...?

@cqulihui,

I recall you have syntax errors in both examples. Attempt it like this:

jQuery("#"+this.questionId+" .select2-results__group").css("groundwork-color", "#8e00ff "); jQuery("#"+this.questionId+" .select2-results__group").css("-webkit-text-fill-color", "#00ff7b");