Text colour in modern style | XM Community
Skip to main content

I have been trying to change the text colour on a selected option to grey/black to contrast with the background. The code below doesn't seem to work in the modern style but does elsewhere, can anybody help?
.LabelWrapper, .QuestionText, .SubQuestionText, .AnswerText{
color:grey!important;
}
Unfortunately I cannot change the yellow primary/secondary colouring, or the modern style so it needs a separate solution
surveyshot.png

Hey Liam, can you throw a preview of your survey into this thread? Be happy to take a look at what you're seeing currently, if you still need the help. Thanks!


Hey Jeremy,

Still looking for some help, thanks! Let me know if this works? Preview - Qualtrics Survey | Qualtrics Experience Management
Thanks,
liam


When I view the first list element in your MC question, I see the CSS on the right side:
image.pngIf I uncheck the "color:" checkbox, the selected text does indeed turn black (the default). I think your selector (.LabelWrapper, .QuestionText, .SubQuestionText, .AnswerText) is trying to grab a different element than you think it is. What happens if you copy the selector
.Skin label.MultipleAnswer.q-checked, .Skin label.SingleAnswer.q-checked
into your css? If you're inspecting that first element, you'll see this css code in the styles tab of the developer tools. When you select a different choice, you'll see the selector is changed as the element you're viewing is no longer the 'q-checked' answer. In that vein of thinking, selecting the second and third options change nothing in the first element. I think that's the selector you want to use in your CSS.


Hey Jeremy,

I've added the below to the custom CSS, but I don't seem to be getting any change. Very new to all of this, so fair chance I've misinterpreted your instructions?
image.pngHave applied this to the same link if you want to have a look. Thanks


Looks like my previous code copied weird too, apologies for that. In CSS, you want your selector to be on the outside of your squiggly brackets, then everything in the brackets are the properties you want to change. In this case, color: grey !important; was fine for the property, but you'll want to change the selector (and I'm hoping it's the correct selector). So the CSS will look like this:
.Skin label.MultipleAnswer.q-checked {
    color: grey !important;
}


Thank you so much for your time, this worked perfectly! I really appreciate it


Glad I could help!


Leave a Reply