Apply custom css which is working for 1 question (color upon hover) to all multiple choice questions on survey | XM Community
Skip to main content
Michael_Cooksey
Administrator
13 days ago
Solved

Apply custom css which is working for 1 question (color upon hover) to all multiple choice questions on survey

  • February 26, 2025
  • 6 replies
  • 34 views
AnneG
Level 3 ●●●
Forum|alt.badge.img+12
  • AnneG
  • Level 3 ●●●
  • 49 replies

Hi there. I was able to figure out from posts here how to get my first question looking just the way I wanted (different color on hover for 4 of 5 options for multiple choice question) but I am stuck on getting this to apply to the rest of the survey questions. 

Below is what I have working for question 1. I tried simply duplicating these lines and updating to the correct QIDs for the additional questions on the survey (not ideal) but that didn’t work at all. Is someone able to help me rework this so that it will automatically apply to all multiple choice questions on my survey? Thanks!!

 

.Skin label.MultipleAnswer, .Skin label#QID1-0-label.SingleAnswer:hover{
background: #ed6960;
}
.Skin label.MultipleAnswer, .Skin label#QID1-1-label.SingleAnswer:hover{
background: #f7c1b8;

}
.Skin label.MultipleAnswer, .Skin label#QID1-3-label.SingleAnswer:hover{
background: #d9ebae;
}
.Skin label.MultipleAnswer, .Skin label#QID1-4-label.SingleAnswer:hover{
background: #8dd964;

Best answer by TomG

​@AnneG,

Assuming you only want it to apply to single answer multiple choice questions, you’d do it like this:

.Skin .Selection:nth-child(1) label.SingleAnswer:hover{background:#ed6960;}
.Skin .Selection:nth-child(2) label.SingleAnswer:hover{background:#f7c1b8;}
.Skin .Selection:nth-child(3) label.SingleAnswer:hover{background:#d9ebae;}
.Skin .Selection:nth-child(4) label.SingleAnswer:hover{background:#8dd964;}

 

View original

6 replies

TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • TomG
  • Level 8 ●●●●●●●●
  • 5919 replies
  • Answer
  • February 26, 2025

​@AnneG,

Assuming you only want it to apply to single answer multiple choice questions, you’d do it like this:

.Skin .Selection:nth-child(1) label.SingleAnswer:hover{background:#ed6960;}
.Skin .Selection:nth-child(2) label.SingleAnswer:hover{background:#f7c1b8;}
.Skin .Selection:nth-child(3) label.SingleAnswer:hover{background:#d9ebae;}
.Skin .Selection:nth-child(4) label.SingleAnswer:hover{background:#8dd964;}

 

AnneG
Level 3 ●●●
Forum|alt.badge.img+12
  • AnneG
  • Author
  • Level 3 ●●●
  • 49 replies
  • February 26, 2025

​@TomG thanks so much, and your assumption is correct (they are all single answer multiple choice questions). Unfortunately I tried applying and it didn’t apply any hover colors, whereas it does if I input my original working solution again so I don’t think it’s user error. Any chance you see a quick alteration needed to what you sent over?

TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • TomG
  • Level 8 ●●●●●●●●
  • 5919 replies
  • February 26, 2025
AnneG wrote:

​@TomG thanks so much, and your assumption is correct (they are all single answer multiple choice questions). Unfortunately I tried applying and it didn’t apply any hover colors, whereas it does if I input my original working solution again so I don’t think it’s user error. Any chance you see a quick alteration needed to what you sent over?

It works for me exactly as-is, so it is something on your end.

Demo

AnneG
Level 3 ●●●
Forum|alt.badge.img+12
  • AnneG
  • Author
  • Level 3 ●●●
  • 49 replies
  • February 26, 2025

​@TomG much appreciate your going to the trouble. I very well may be having issues on my end as your demo displayed correctly the first time I viewed and now isn’t showing color. So while I dig into that, let me just ask 1 more question.

Does it matter that your demo question was a vertical display while my questions are horizontal? And does it matter that your demo only had 1 question vs. the multiple I have in mine?

Just calling out in case any adjustments would be required by that. Thanks again.

TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • TomG
  • Level 8 ●●●●●●●●
  • 5919 replies
  • February 26, 2025

The issue is vertical vs horizontal. For horizontal change .Selection to .LabelContainer

The number of questions doesn’t matter...it will apply to any horizontal single answer multiple choice question.

AnneG
Level 3 ●●●
Forum|alt.badge.img+12
  • AnneG
  • Author
  • Level 3 ●●●
  • 49 replies
  • February 26, 2025

Bless you! It works!

Leave a Reply


Terms & Conditions