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

cqulihuicqulihui Community Member Qubie ✭

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

I use a Select2 question and want to change the font color of the names of the groups. The following code doesn't work:
'''
jQuery("#"+this.questionId).find("select:optgroup").css("background","red");
'''
How can I do that?
Thanks very much.

Answers

  • flebfleb Czech RepublicCommunity Member Sage ✭✭✭

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

  • cqulihuicqulihui Community Member Qubie ✭

    @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!

  • flebfleb Czech RepublicCommunity Member Sage ✭✭✭

    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");
    
  • cqulihuicqulihui Community Member Qubie ✭
    edited May 24

    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.

  • flebfleb Czech RepublicCommunity Member Sage ✭✭✭

    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...?

  • TomGTomG Raleigh, NCCommunity Member, Product Ideas Wizard ✭✭✭✭✭

    @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");
    
Sign In to Comment