I want to change colour of star rating

Laurence

Asked on September 6, 2022 11:15 PM

I want to change colour of star rating, but cannot find this in design tab. Colour of the stars (gray) clashes with survey background. Cheers

Sabina G

Answered on September 7, 2022 12:47 PM

123FormBuilder Support
Hello,
 
Thank you for contacting us.
 
While we do not have an option for changing the colour of the rating stars, you may use this CSS code to add it in the “Custom CSS” under Design:
 
#form div[data-role=”control”] div[data-type=”star-rating”][data-role=”i123-input”]
{
color: #9D47BF!important;
}
 
Where #9D47BF represents the colour code. You can change this with whichever colour you prefer.
 
If you have any other questions or concerns, do not hesitate to reach out and we’ll be happy to assist.

Laurence

Answered on September 8, 2022 2:52 AM

Thanks Sabina. Very helpful!

 

Would you also happen to have some CSS code to change star rating hover colour?

 

Thanks in advance,

Laurence

Sabina G

Answered on September 12, 2022 5:08 PM

123FormBuilder Support
Hello,
 
The CSS code for changing the color of the rating stars while hovering over the field is this:
 
#form div[data-ui-role=”ui-element”][data-type=”star-rating”] div[data-role=”star”][data-is-checked]:not([data-is-hover]), #form div[data-ui-role=”ui-element”][data-type=”star-rating”] div[data-role=”star”][data-is-hover],  #form div[data-ui-role=”ui-element”][data-type=”star-rating”] div[data-role=”star”][data-rating-tab-focus-state],  #form div[data-ui-role=”ui-element”][data-type=”star-rating”] div[data-role=”star”][data-rating-tab-focus-state][data-is-checked]{
color:red;
}
 
If there is anything else we can assist you with, do not hesitate to reach out.