divs
What is 123FormBuilder?
123FormBuilder is a free online form builder which helps you create online forms without writing a single line of code.
POPULAR ARTICLES
- How to create a contact form as easy as 1-2-3
- Field Validation on 123FormBuilder
- Does the form editor have real-time preview?
- How to customize the Thank You page?
- Can I receive my email notifications as PDFs?
- Request approvals through your forms
- How to use conditional logic to show/hide fields?
- Can I use multiple payment gateways?
- Changing the Form Logo on 123FormBuilder
- Managing form submissions
123FormBuilder /
Answers /
I want to change colour of star rating
I want to change colour of star rating
Laurence
Asked on September 6, 2022 11:15 PM
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.
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.
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.
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