How to color the stars of p:rating based on the rating value?

Question

I'm trying to color the stars of the PrimeFaces rating component depending on the value. If the value is 1, the stars should be red, if the value is 5, the stars should be green.

score 1 · Answer 1 · answered Jul 22 '22 at 09:08

The easy way would be adding a class based on the value of the rating and update it when the value changes:

<p:rating ... styleClass="stars-#{bean.ratingValue}">
    <p:ajax update="@this"/>
</p:rating>

With this class, you can style the stars based on the set class:

body .ui-rating.stars-1 .ui-rating-star-on a {
    color: red;
}
body .ui-rating.stars-2 .ui-rating-star-on a {
    color: orange;
}
body .ui-rating.stars-3 .ui-rating-star-on a {
    color: yellow;
}
body .ui-rating.stars-4 .ui-rating-star-on a {
    color: greenyellow;
}
body .ui-rating.stars-5 .ui-rating-star-on a {
    color: green;
}

How to color the stars of p:rating based on the rating value?

1 Answers1