How to change the font color of optgroups in Select2 question?

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

> @fleb said: > Hi @cqulihui, > have you checked whether your CSS selector is correct using the inspector? If not, try it. You can use this manual. Thanks @fleb! I learned this manual and had a try. I found that I could change the font color of the names of the groups by changing the following code: `.select2-results__group{ background-color:#8e00ff -webkit-text-fill-color:#00ff7b }` But I don't know where I should put this code, in "Style"-->"CSS" or "Add javascript"-->"addOnload"? Thank you for your help!

Hi @cqulihui, your code is in CSS. Therefore you should put it in the CSS. It will change these properties in all select2 questions in your survey. By the way, I think you should use semicolons after particular declarations. If you want just one question to be changed, find id youf this question in the inspector and put it to your selector. It should look lie this now: #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 but not other ones, you'd better use jQuery and insert the code to the JavaScript. It will look like this: jQuery(" .select2-results__group").css("background-color", "#8e00ff "); jQuery(" .select2-results__group").css("-webkit-text-fill-color", "#00ff7b");

Hi @fleb, thanks for you help! I tried the code you provided, but it doesn't work. I am not sure whether there is something wrong in my code elsewhere. Here 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-color", "#00ff7b"); And if I put it this way, it still doesn't 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("background-color", >"#8e00ff "); > jQuery("#"+this.questionId).find("select2_results__group").css("-webkit-text-fill-color", >"#00ff7b"); I don't know what's wrong. Is there anything wrong? Thanks a lot.

Hi @cqulihui, I've never seen this mark `>` in jQuery. Are you sure it is correct? I've also never tried to change more CSS properties in one `jQuery`, so I don't know whether it is possible. Have you tried to look to the console log whether there is some error? Here is a short video about the console. I'm afraid I can't help you without seeing the survey question. I've never I might try it if you'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 think you have syntax errors in both examples. Try it like this: ``` jQuery("#"+this.questionId+" .select2-results__group").css("background-color", "#8e00ff "); jQuery("#"+this.questionId+" .select2-results__group").css("-webkit-text-fill-color", "#00ff7b"); ```