Styling Required Fields with Custom CSS!

Customizing the style of your required fields with some CSS is pretty simple. If you want a short intro to CSS (and Cognito Forms CSS specifically), you can refer to a post I wrote a while ago called Styling Cognito Forms with CSS. But if you have a basic level of knowledge of CSS, let’s dive right in!

When you mark a field as required in the form builder, an asterisk is added next to the label, and the form cannot be submitted without that field being filled out. This is a great feature to use when collecting necessary information because folks love submitting forms with as little info as possible (at least I know I do).

The asterisk indicating a required field is a pretty universal convention. But let’s say you wanted to make it absolutely explicit with the word “required.” Using some simple CSS, this is no problem:

Here, I’m just selecting two elements: 1) the required input field that allows me to change the border color, and 2) the text that comes after the label on required fields, so I can change the asterisk to “(required)”. Every required field gets the c-required class added, so selecting required fields and excluding non-required fields is super easy.

Pseu, Pseu, Pseudio!

If you’re not familiar with the :after syntax, I’ll explain what’s happening here:

.c-required .c-label:after will select a pseudo-element at the very end of the .c-required .c-label container. Its a pseudo-element because it doesn’t exist in the HTML, but via CSS we can add some text and then style that text as if it were a real element. The content property contains a value of text that shows up as if it is in the HTML, but it is only virtual. Out of the box, Cognito Forms has CSS to add an asterisk in this way, but in this example we are overriding the asterisk with our own text. Also, note the space at the beginning of (required). This is just to give some space between (required) and the field label.

Check out our help topic to learn more about customizing your forms with CSS.