I have implemented star rating and it works well. Now requirement is to have different color for each star where in my star color comes from CSS and its colored as GOLD. How can I give it different colors. for example - 1st star should be red, second blue, third green and so on..
Css:
.rating {
border: none;
float: left;
direction: ltr;
}
.rating>input {
display: none;
}
.rating>label:before {
margin: 5px;
font-size: 1.25em;
font-family: "Font Awesome 5 Free";
display: inline-block;
content: "f005";
font-weight: 900;
}
.rating>.half:before {
content: "f089";
position: absolute;
}
.rating>label {
color: #ddd;
float: right;
}
.rating>input:checked~label,
/* show gold star when clicked */
.rating:not(:checked)>label:hover,
/* hover current star */
.rating:not(:checked)>label:hover~label {
color: gold;
cursor: pointer;
}