Creating a Custom Asterisk in CSS for Required Fields

If you want to customise the asterisk colour in required fields, we’ll show you how using CSS.

Not already signed up for Wufoo? Let's get started!

How to Create a Custom Asterisk in CSS for Required Fields

Do you want to customise the colour of the asterisk that appears next to required fields on a form? (e.g. for date of birth or addresses.) Whether you have a colour scheme going that you're trying to keep consistent or you use a preferred colour for branding, using a custom asterisk colour 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 colour 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 enter the colour you want for the custom fields asterisk. It's that simple. Happy customising!