CSS to have the Rating scale in different colours.
By using this CSS, you can implement a rating scale in various colors, thereby enhancing the user experience and making the question rating visually appealing.
.answer-option-rating--icons::after {
top: calc(100% + 10px);
}
.answer-option-rating--icons:nth-child(1)::after {
content: "First one";
}
.answer-option-rating--icons:nth-child(2)::after {
content: "Second one";
}
.answer-option-rating--icons:nth-child(3)::after {
content: "Third one";
}
.answer-option-rating--icons:nth-child(4)::after {
content: "Fourth one";
}
.answer-option-rating--icons:nth-child(5)::after {
content: "Fifth one";
}
.answer-option-rating--icons:nth-child(1) svg path {
color: red;
}
.answer-option-rating--icons:nth-child(2) svg path {
color: orange;
}
.answer-option-rating--icons:nth-child(3) svg path {
color: yellow;
}
.answer-option-rating--icons:nth-child(4) svg path {
color: seagreen;
}
.answer-option-rating--icons:nth-child(5) svg path {
color: green;
}
If you wish to modify the colors in the specific portion of the code " color: ; ", you can make the desired changes. For instance, if you want to adjust the color for the 3rd star rating, please update the following code:
.answer-option-rating--icons:nth-child(3) svg path {
color: yellow;
}
