If you're using the Rating/CSAT field in your form, you may want the icons to better match your brand colors or overall design. By default, these icons use the standard Formaloo styling, but in some cases – such as darker themes, custom branding, or accessibility needs – you might want to adjust their appearance.
In this guide, we’ll show you exactly how to customize the color of Rating/CSAT field icons (starts, hearts, etc) using simple CSS. You’ll learn how to change their default color, or apply hover effects – so your form looks and feels exactly the way you want.
This guide is helpful if you want to:
Match rating icons to your brand colors
Change how icons look on hover
Style one specific rating field differently from others
💡 If you’re new to custom CSS in Formaloo, these guides can help navigate:
How to target any form field with Custom CSS & JS (using Field IDs)
Learn the basics of selecting specific fields
Most requested Custom CSS snippets
Ready-to-use styling examples
Supported CSS class names in Formaloo
Style entire components and form sections
These resources will help you style not only ratings but also buttons, inputs, layouts, and other elements across your forms.
Step 1. Assign an ID to your field
First, open your form editor and select the rating field you want to customize.
In the field settings, add a unique Field ID, for example: csat_field
This ID will be used to target the field with CSS.
Step 2. Open the Custom CSS section
In the Form Editor, go to Design → Custom CSS:
This is where you’ll add your CSS code.
3. Add CSS to style different states
Use the examples below as a starting point. Make sure to replace "your_field_id" with the actual ID you assigned, e.g.: "csat_field".
Default state
[data-field-id="your_field_id"] button svg *
{
fill: #D77094 !important;
stroke: #D77094 !important;
}
On hover
[data-field-id="your_field_id"] button:hover svg *
{
fill: #D288A2 !important;
stroke: #D288A2 !important;
}
Customize it your way
You’re completely free to adjust these snippets to fit your design:
Change colors to any hex code you prefer 🎨
Use only fill or only stroke if you don’t need both ✏️
Skip hover effects if you want a simpler look ⏭️
Apply different colors to different rating fields 🌈
Customizing rating icons is a simple and powerful way to make your forms feel more polished and on-brand. With field IDs and a few lines of CSS, you can create exactly the look and feel you want – no coding expertise required!