# CSS to have the Rating scale in different colours

**URL:** <https://community.surveysparrow.com/t/css-to-have-the-rating-scale-in-different-colours/3505>\
**Category:** CSS Knowledge Bonanza! 🕺\
**Created:** [July 18, 2023, 7:06am UTC](https://community.surveysparrow.com/t/css-to-have-the-rating-scale-in-different-colours/3505 "2023-07-18T07:06:34Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![adithya.s](https://avatars.discourse-cdn.com/v4/letter/a/cab0a1/32.png) [@adithya.s](https://community.surveysparrow.com/u/adithya.s)\
**Post date:** [July 18, 2023, 7:06am UTC](https://community.surveysparrow.com/t/css-to-have-the-rating-scale-in-different-colours/3505/1 "2023-07-18T07:06:34Z")

</div>

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.

 ![Screenshot 2023-07-18 at 12.19.12 PM](https://europe1.discourse-cdn.com/flex013/uploads/surveysparrow1/original/1X/542f5db8482a01367217d89239684cc3ee502d6e.jpeg)

 ![Screenshot 2023-07-18 at 12.32.51 PM](https://europe1.discourse-cdn.com/flex013/uploads/surveysparrow1/original/1X/ac6b44915ddd5dad4b73cce100694aeb8bc1a117.jpeg)

.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;  
}