Change Scale Rating Element Color

I wish to create an NPS survey with a scale of 0-10. I need help making the rating scale coloured

• 0,1,2,3,4,5,6 - red
• 7,8,- yellow
• 9, 10 - green

Hi Sudipta,

Thanks for contacting Jotform Support. I checked your field and you have already added CSS codes to change the color of the options, but only when hovered upon:

Is that not how you want them to show? Do you want to permanently show the mentioned colors directly on the field instead of showing the colors on hovering?

Please check and let us know.

Yes, i wish to have them coloured even when not hovered or selected

Hi Sudipta,

Thanks for getting back to us. You can add this CSS code to your form to set a background color for the choices:

.rating-item>label {

background-color: cyan !important; 

}

With that CSS code above, this is how it would appear on your form:

Feel free to replace the color with any RGBA or HEX color to set it on your scale rating. If you need to know again the steps of how to inject the CSS code above, you can just follow the steps from this guide.

Let us know if you have more questions or need more help.

I wish to colour different the options differently

0 to 6 should be red,

7 & 8 should be yellow

9 & 10 should be green

Hi Sudipta,

Thanks for getting back to us and sorry for misunderstanding what you would like to happen. You can use this CSS code instead:

label[for="input_4_0"], label[for="input_4_1"], label[for="input_4_2"], label[for="input_4_3"], label[for="input_4_4"], label[for="input_4_5"], label[for="input_4_6"] {

background-color: red !important;

}



label[for="input_4_7"], label[for="input_4_8"] {

background-color: yellow !important;

}



label[for="input_4_9"], label[for="input_4_10"] {

background-color: green !important;

}

Give this a try and let us know how it goes.