How to customize the Rating control star colors
Description:
To customize the rating control star colors based on their state.
Solution:
To set different colors for rating stars, use the cssClass property of rating and modify the background image for the stars. Three different types of images can be used for each state. Refer to the following code
<ej:Rating ID="Rating1" runat="server" Value="3" CssClass="custom"></ej:Rating> |
<style> /*Prevent default state image*/ .custom.e-rating.e-horizontal .e-shape, .custom.e-rating.e-vertical .e-shape, .custom.e-rating.e-horizontal .e-shape-list, .custom.e-rating.e-vertical .e-shape-list, .custom.e-rating.e-horizontal .e-reset, .custom.e-rating.e-vertical .e-reset { background: none; }
/*Customize reset state image*/ .custom.e-rating.e-horizontal .e-reset, .custom.e-rating.e-vertical .e-reset { background: url('../Content/rating/images/rating1.png') no-repeat; background-size: 100%; margin: 1px; }
/*Customize selected & active state image*/ .custom.e-rating.e-horizontal .e-shape.selected, .custom.e-rating.e-horizontal .e-shape.active, .custom.e-rating.e-vertical .e-shape.selected, .custom.e-rating.e-vertical .e-shape.active { background: url('../Content/rating/images/rating2.png') no-repeat; background-size: 100%; }
/*Customize inactive state image*/ .custom.e-rating.e-horizontal .e-shape.inactive, .custom.e-rating.e-vertical .e-shape.inactive, .custom.e-rating.e-horizontal .e-shape-list, .custom.e-rating.e-vertical .e-shape-list { background: url('../Content/rating/images/rating3.png') no-repeat; background-size: 100%; }
.custom.e-rating .e-shape.active { background-position: 0 0; }
.custom.e-rating.e-horizontal .e-shape-list, .custom.e-rating.e-vertical .e-shape-list { background-position: 0 0; float: left; } </style>
|
Sample: Rating-786604222
Now, rating stars will be displayed as follows
