option in multiple choice question | XM Community
Skip to main content
Solved

option in multiple choice question


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

Use nth-child on the li elements: ``` <style> .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;} </style> ```
View original

3 replies

TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • 5923 replies
  • Answer
  • June 21, 2018
Use nth-child on the li elements: ``` <style> .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;} </style> ```

Forum|alt.badge.img+19
  • Level 5 ●●●●●
  • 543 replies
  • August 20, 2019
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.

TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • 5923 replies
  • August 20, 2019
@Kate, 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