option in multiple choice question | XM Community

option in multiple choice question

  • 21 June 2018
  • 3 replies

If respondents selected option "red" , that option background need to change in red color. likewise for green, blue color's as well. Please suggest.

Best answer by TomG 21 June 2018, 23:34

View original

3 replies

Userlevel 7
Badge +27
Use nth-child on the li elements:
.Skin li:nth-child(1) label.MultipleAnswer.q-checked, .Skin li:nth-child(1) label.SingleAnswer.q-checked {background:red;}
.Skin li:nth-child(2) label.MultipleAnswer.q-checked, .Skin li:nth-child(2) label.SingleAnswer.q-checked {background:green;}
.Skin li:nth-child(3) label.MultipleAnswer.q-checked, .Skin li:nth-child(3) label.SingleAnswer.q-checked {background:blue;}
Userlevel 7
Badge +19
Hey @Tom- I'm kinda a newbie at code; I see how the colors work. But can you share how I get this to work on specific questions? Where do I place the code? When I place in the custom CSS it works only on the first question of my suvey 😕 I'd like it on just 1 of 5 questions if possible.
Userlevel 7
Badge +27

The only thing question specific about the example CSS is the element tags (i.e., type) and the classes associated with them. So, if it isn't working on some questions it means they don't have elements that match those tags/classes. That means the underlying html is different in some way.

To make it more specific, you can add the CSS to a question's text in a `<style>` tag and it will apply only to questions on that page of the survey. To make it specific to a question, you would add the question id to the rule's selector at the correct place in the hierarchy. For example:
.Skin #QID1 .li:nth-child(1) ...etc...

Leave a Reply