How to add a class to response options | XM Community
Skip to main content

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!

 

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");
});

 

Thankyou, that’s really helpful :) 

 

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

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;}

 

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!

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.

Terms & ConditionsAccessibility statement