+ Start a Discussion
sumithasumitha 

Star Rating in Visual force page is not displayed in Firefox browser

Hi All,

Reference: https://codepen.io/rogie/pen/GIfqc

This Code is working perfectly in Google Chrome but it is not working in Firefox.
<apex:page standardcontroller="Account" sidebar="false" action="{!showRate}" showheader="false" docType="html-5.0" lightningStylesheets="true">
 <apex:form >
<apex:slds />
  <style>
.star-rating fieldset {
  font-size:0;
  white-space:nowrap; 
  display:inline-block;
  width:250px;
  height:50px;
  overflow:hidden;
  position:relative;
  background:
      url('data:image/svg+xml;utf-8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="20px" height="20px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve"><polygon fill="#DDDDDD" points="10,0 13.09,6.583 20,7.639 15,12.764 16.18,20 10,16.583 3.82,20 5,12.764 0,7.639 6.91,6.583 "/></svg>');
  background-size: contain;
}

.star-rating input { 
   opacity: 0;
   display:inline-block;
   width: 100%;
   height: 100%; 
   margin:0;
   padding:0;
   z-index: 2;
   position: relative;
}

.star-rating input:hover + label,
.star-rating input:checked + label {
     opacity:1;    
   }

.star-rating label {
   opacity: 0;
   position: absolute;
   left: 0;
   top: 0;
   height: 100%;
   width: 20%;
   z-index: 4;
   background: 
      url('data:image/svg+xml;utf-8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="20px" height="20px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve"><polygon fill="#FFDF88" points="10,0 13.09,6.583 20,7.639 15,12.764 16.18,20 10,16.583 3.82,20 5,12.764 0,7.639 6.91,6.583 "/></svg>');
   background-size: contain;
 }

.star-rating td ~ td label 
               {
  width: 20%;
  z-index: 8;  
}
.star-rating td ~ td ~ td label 
               {
  width: 30%;
  z-index: 7;  
}
.star-rating td ~ td ~ td ~ td label 
               {
  width: 40%;
  z-index: 6;  
}
 .star-rating td ~ td ~ td ~ td ~ td label
               {
                width: 50%;
         z-index: 5; 
               }
.star-rating td ~ td ~ td ~ td ~ td ~ td label {
  width: 60%;
  z-index: 4;
}
.star-rating td ~ td ~ td ~ td ~ td ~ td ~ td label {
  z-index: 3;
  width: 70%;
}
.star-rating td ~ td ~ td ~ td ~ td ~ td ~ td ~ td label {
  z-index: 2;
  width: 80%;
}
 .star-rating td ~ td ~ td ~ td ~ td ~ td ~ td ~ td ~ td label {
  z-index: 1;
  width: 90%;
} 
.star-rating td ~ td ~ td ~ td ~ td ~ td ~ td ~ td ~ td ~ td label {
  z-index: 0;
  width: 100%;
} 
               
.font
{
 font-size: 19px;
}
</style>
 <apex:selectRadio value="{!fr.RatingScore__c}" layout="lineDirection">
   <apex:actionSupport event="onclick" reRender="form"/>
                       <apex:selectOption itemValue="0.5"></apex:selectOption>
                        <apex:selectOption itemValue="1"></apex:selectOption>
                       <apex:selectOption itemValue="1.5"></apex:selectOption>
                        <apex:selectOption itemValue="2"></apex:selectOption>
                       <apex:selectOption itemValue="2.5"></apex:selectOption>
                        <apex:selectOption itemValue="3"></apex:selectOption>
                       <apex:selectOption itemValue="3.5"></apex:selectOption>
                        <apex:selectOption itemValue="4"></apex:selectOption>
                       <apex:selectOption itemValue="4.5"></apex:selectOption>
                        <apex:selectOption itemValue="5"></apex:selectOption>
  </apex:selectRadio>
</apex:form>
</apex:page>
Please Advice,

Thanks & Regards,
Sumitha P
 
vishal-negandhivishal-negandhi
The code works for me, even in Firefox. May be you need to update your browser?
sumithasumitha
Hi,

Even after update also the Star rating is not working on my end.
or Can you suggest any possible link with same functionality.
Please advice,

Thanks
Sumitha P