Changing colour of response scale boxes | XM Community
Skip to main content

Hi there
I have CSS in my "look and feel" which shades my response boxes a certain colour of grey. However, when we have multi-select questions, this CSS doesn't seem to apply and it reverts back to the standard Qualtrics light grey. Has anyone experienced this and is there CSS I can use to ensure all my boxes remain my darker grey until selected, not just my normal likert scale ones?

Hi there, if you still need, it's likely that your CSS doesn't include the MultipleAnswer piece. Try updating your CSS with something like the below:
.Skin label.SingleAnswer, .Skin label.MultipleAnswer {
background-color:rgba(170, 170, 170, 1) !important;
}

.Skin label.SingleAnswer.q-focused, .Skin label.MultipleAnswer.q-focused {
background-color:rgba(170, 170, 170, 1) !important;
}

.Skin label.SingleAnswer.q-checked, .Skin label.MultipleAnswer.q-checked {
background-color:rgba(255, 156, 0, 1) !important;
}

https://community.qualtrics.com/XMcommunity/discussion/comment/53028#Comment_53028What .Skin labels would I need to add for this to apply to every possible question type? I'm trying to do this for all questions, and your code worked brilliantly for Single Answer and Multiple Answer. However, I'm not familiar with CSS enough to know the remaining labels.

Hi ABird , you can find the selectors by using the web browser's developer menu/browser tool. Try hitting F12 when you are previewing the survey, selecting the part of the question you want to adjust, and examining the selector being used and the rules in place for it. The below example looks at a cell of a matrix table, which uses .Skin .Matrix table td to text-align: center the scale labels + radio buttons:
matrix_css.png

Leave a Reply


Terms & Conditions