Fill star with black color on inactive and yellow on active

[Raj Kumar]

sir/madam,
i m using ej.Rating in my grid. On inactive it is coming in while color but i want that in black and on active it is coming in blue but i want it in yellow.
How to fill custom colors to stars. Kindly reply soon.

current situation:


Desired :

[Ilakkiya Baskar]

Hi Raj, 

Thank you for contacting Syncfusion Support. 

We analyzed your query. We suggest you use cssClass property to change the image of the Rating Component. 

Please refer the following code, 

<script type="text/javascript"> 

        $(function () { 

          $("#fullRating").ejRating({ value: 4 ,maxValue:5,height:30, width:80,shapeHeight:60, shapeWidth:30,cssClass:"custom"}); 

            

        }); 

    </script> 

 

<style> 

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

    } 

     

     .custom.e-rating.e-horizontal .e-reset,  

    .custom.e-rating.e-vertical .e-reset 

    {   

            background: url('../content/images/rating1.png') no-repeat; 

                                 background-size:100%; 

            margin: 1px; 

    } 

    .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/images/rating2.png') no-repeat; 

                     background-size:100%; 

    } 

     

    .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/images/rating5.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> 

Please refer the sample in the below location, 

http://www.syncfusion.com/downloads/support/forum/137369/ze/Rating_Sample-cust1824692372 

 

Let us know if there is any concern, We will be happy to assist you. 

 

Regards, 

Ilakkiya B