Hello everyone! This is my first question here in the community :-) (It's actually two questions in one, sorry!)I'm creating a survey and I have a 5-point satisfaction scale. In some questions it's a multiple choice and in some it's a matrix table.The multiple choice looks like this:I'd love that the buttons would change color when you hover over them and then also once you make a selection. I'd want to go on the scale from green (Completely satisfied) over yellow and orange to red (Completely dissatisfied).The same thing I'd love to implement for the matrix table. I'd like that after selection, each of the buttons would have different color. In my case it would be Completely satisfied is dark green, Satisfied is green, Fairly satisfied is yellow and so on...Currently as you see it's just set to dark blue (both the frame and the circle) whatever the choice is selected.The current CSS I have there is following:/* Buttons */.Skin label.SingleAnswer,.Skin label.MultipleAnswer,.Skin select { border-color: #005587;}.Skin .NPS label.SingleAnswer span:after { border-color: #FFFFFF;}.Skin label.SingleAnswer.q-checked span,.Skin label.SingleAnswer.q-checked.q-focused span { color: #00aec7 !important;}.Skin label.SingleAnswer.q-checked span:after,.Skin label.SingleAnswer.q-checked.q-focused span:after { background-color: #0085ad !important;}.Skin label.MultipleAnswer.q-checked span,.Skin label.MultipleAnswer.q-checked.q-focused span { color: #00aec7 !important;}/* Multiple Choice */.Skin #Questions .MC .SingleAnswer,.Skin #Questions .MC .MultipleAnswer { border: 1px solid transparent;}.Skin #Questions .MC .SingleAnswer:hover,.Skin #Questions .MC .MultipleAnswer:hover { border: 1px solid #00205b;}Many thanks for any help you can provide! :-)

Okay.So Cascasding Style Sheets (CSS) follow the following format:selector {property1:value1; property2:value2}The selector, as the name implies is used to select the element(s) we want to apply the style to. The property:value pair gives us the is the style we want to apply. So, for example: table{background-color:red} will apply a red background to all tables on the page. In the earlier answer, I had given you the selector for each column. So, td:nth-of-type(1)>.q-radio will select all radio buttons in column 1, td:nth-of-type(2)>.q-radio in column 2 etc.Now you can define the different styles you want to apply to these columns using the appropriate property:value pairs. Here's a link that lists a few styles related to texts. There are many resources online that you can use to figure out what styles to apply based on your preference.

You'll basically need to create a complex selector for each colour you want to assign. So something like: td:nth-of-type(1)>.q-radio will give you all the radio buttons in the first column of a matrix (It should also work for MC questions in a horizontal layout).Then you can set the various parameters you want like colour and background etc.

How to have a different color for different selections in a matrix table when a choice is selected?

How to have a different color for different selections in a matrix table when a choice is selected? | XM Community

Sign up

Login to the Community

Scanning file for viruses.

This file cannot be downloaded