How to Create a Custom Asterisk in CSS for Required Fields

Do you want to customize the color of the asterisk that appears next to required fields on a form? (For example, for date of birth or addresses.) Whether you have a color scheme going that you’re trying to keep consistent, or if you use a preferred color for branding, using a custom asterisk color in CSS is possible when using our program. Here’s how:

When you go to the CSS for the asterisk codes, you’ll find the following:

form span.req{
  display:inline;
  float:none;
  color:red !important;
  font-weight:bold;
  margin:0;
  padding:0;
}

You don’t need to change the color in the fourth line in this set of CSS code. Instead, change the class “req” in our CSS:

.wufoo span.req{
  color:red !important;
}

In this line, you’ll be able to input your desired color for the custom fields asterisk. It’s that simple. Happy customizing!