How to Add Border on Star Ratings Element

In addition, this is an evaluation form, and I can barely see the stars before filling it out. I've read about customizing, but I can't find a way to enhance the border to make them stand out. I don't think changing the size will help, but maybe?

Please assist.

Hi Angela,

You can use custom CSS to add a border to your stars, but this doesn’t modify the stars directly. Instead, we create pseudo-elements in CSS to mimic the Star Ratings element with a border. Let me show you how with the cloned version of your form:

1. First, copy this code:

/* Default stars */

div.form-star-rating-star::before {

  content: "★";

  font-size: 50px !important;

  color: white !important;       /* default white */

  text-align: center;

  line-height: 1;

  position: relative !important;

  right: 9px !important;

  bottom: 8px !important;

  text-shadow: 

    -1px -1px 0 #000,  

     1px -1px 0 #000,  

    -1px  1px 0 #000,  

     1px  1px 0 #000;  /* black border */

  transition: color 0.2s ease;

}

/* Hover effect: light blue */

div.form-star-rating-star:hover::before {

  color: #7fb3ff !important;    /* light blue on hover */

}

/* Selected stars: blue */

div.form-star-rating-star.rated::before {

  color: #4a90e2 !important;    /* blue when selected */

}

2. In Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.

3. Now, in the Form Designer menu, click on the Styles tab, scroll down and paste the code into the Inject CSS Code box. That’s it. The code is automatically saved.

Here's the sample result after injecting the custom CSS codes:

Give it a try and let us know if you need any more help.