CSS for the Classic survey to customise the opinion scale color:
/*options 0 to 6 */
.ss_rating_input--classic .ss-answer-option--rating:nth-of-type(1),
.ss_rating_input--classic .ss-answer-option--rating:nth-of-type(2),
.ss_rating_input--classic .ss-answer-option--rating:nth-of-type(3),
.ss_rating_input--classic .ss-answer-option--rating:nth-of-type(4),
.ss_rating_input--classic .ss-answer-option--rating:nth-of-type(5),
.ss_rating_input--classic .ss-answer-option--rating:nth-of-type(6),
.ss_rating_input--classic .ss-answer-option--rating:nth-of-type(7){
background-color: rgba(252, 155, 156);
border-color: rgb(251, 115, 117);
color: rgb(0, 0, 0);
}
.ss_rating_input--classic .ss-answer-option--rating:nth-of-type(1):hover,
.ss_rating_input--classic .ss-answer-option--rating:nth-of-type(2):hover,
.ss_rating_input--classic .ss-answer-option--rating:nth-of-type(3):hover,
.ss_rating_input--classic .ss-answer-option--rating:nth-of-type(4):hover,
.ss_rating_input--classic .ss-answer-option--rating:nth-of-type(5):hover,
.ss_rating_input--classic .ss-answer-option--rating:nth-of-type(6):hover,
.ss_rating_input--classic .ss-answer-option--rating:nth-of-type(7):hover {
background-color: rgba(252, 155, 156, 0.8);
border-color: rgb(251, 115, 117);
}
/*options 7 to 8 */
.ss_rating_input--classic .ss-answer-option--rating:nth-of-type(8),
.ss_rating_input--classic .ss-answer-option--rating:nth-of-type(9){
background-color: rgba(255, 219, 120);
border-color: rgb(255, 209, 83);
color: rgb(0, 0, 0);
}
.ss_rating_input--classic .ss-answer-option--rating:nth-of-type(8):hover,
.ss_rating_input--classic .ss-answer-option--rating:nth-of-type(9):hover {
background-color: rgba(255, 219, 120,0.8);
border-color: rgb(255, 209, 83);
}
/*options 9 to 10 */
.ss_rating_input--classic .ss-answer-option--rating:nth-of-type(10),
.ss_rating_input--classic .ss-answer-option--rating:nth-of-type(11){
background-color: rgb(141, 205, 113);
border-color: rgb(122, 197, 89);
color: rgb(0, 0, 0);
}
.ss_rating_input--classic .ss-answer-option--rating:nth-of-type(10):hover,
.ss_rating_input--classic .ss-answer-option--rating:nth-of-type(11):hover {
background-color: rgb(141, 205, 113,0.8);
border-color: rgb(122, 197, 89);;
}
