How to add a class to response options | XM Community
Skip to main content
Michael_Cooksey
Administrator
16 days ago
Solved

How to add a class to response options

K
Forum|alt.badge.img+1

Hi,

I’m doing some custom styling on a multiple choice question in my survey and I think life would be easier if I could add a custom css class to each of the response options. I’m sure you can do this through javascript but I’m not sure how/what syntax to use? 

I don’t want to add the class to a parent element because my css would specifically be targeting when the response also has the “q-checked” class applied, so that a selected answer (for this question only, no other questions) has specific styling applied.

Thankyou!

 

Best answer by TomG

One of the nice things about CSS is your don’t need to apply the class to each element to be styled.  You can just add a class to the question then include it in your CSS rule.  For example, you can do something like in your Custom CSS:

.Skin .myClass label.MultipleAnswer.q-checked,
.Skin .myClass label.SingleAnswer.q-checked {
  color: red;
}

The add this JS to your question:

Qualtrics.SurveyEngine.addOnload(function() {
  jQuery(this.questionContainer).addClass("myClass");
});

 

View original

5 replies

TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • TomG
  • Level 8 ●●●●●●●●
  • 5923 replies
  • Answer
  • January 30, 2025

One of the nice things about CSS is your don’t need to apply the class to each element to be styled.  You can just add a class to the question then include it in your CSS rule.  For example, you can do something like in your Custom CSS:

.Skin .myClass label.MultipleAnswer.q-checked,
.Skin .myClass label.SingleAnswer.q-checked {
  color: red;
}

The add this JS to your question:

Qualtrics.SurveyEngine.addOnload(function() {
  jQuery(this.questionContainer).addClass("myClass");
});

 

K
Forum|alt.badge.img+1
  • KatieAK
  • Author
  • 2 replies
  • January 30, 2025

Thankyou, that’s really helpful :) 

 

If I wanted to selectively apply the class to only one or two of responses, is that possible?

TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • TomG
  • Level 8 ●●●●●●●●
  • 5923 replies
  • January 30, 2025

For specific labels, you don’t need a class. You can use the ‘for’ attribute in your CSS selector:

.Skin label.MultipleAnswer.q-checked[for='QR~QID1~2'] {color:red;}

 

K
Forum|alt.badge.img+1
  • KatieAK
  • Author
  • 2 replies
  • January 30, 2025

Oh cool, I didn’t know that! Thanks. 

 

So for this example:

 

I could add class 1 to the question container and then essentially overwrite it for unsure & other using the CSS selector? That’s a lot more efficient than what I’m currently doing, thankyou!

TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • TomG
  • Level 8 ●●●●●●●●
  • 5923 replies
  • January 30, 2025
KatieAK wrote:

Oh cool, I didn’t know that! Thanks. 

 

So for this example:

 

I could add class 1 to the question container and then essentially overwrite it for unsure & other using the CSS selector? That’s a lot more efficient than what I’m currently doing, thankyou!

Yes.

K
1 person likes this
  • K
    KatieAK

Leave a Reply


Terms & Conditions