CSS :required

The :required pseudo-class in CSS is used to select input fields that are required for form submission. By styling these required fields, you can provide visual feedback to users, making it clear which fields they must fill out before submitting a form.

How to Use :required

To use the :required pseudo-class, you should have input fields in your form marked with the required attribute. CSS can then be applied to these fields to change their appearance when they are empty and required.

Example

In the following example, we will style a required text input and a required email input field. The CSS will change their background color to light pink when they are required but left empty.


<style>
  input:required {
    background-color: lightpink;
  }
  input:valid {
    background-color: lightgreen;
  }
</style>

<form>
  <label for="name">Name (required):</label>
  <input type="text" id="name" required>
  
  <label for="email">Email (required):</label>
  <input type="email" id="email" required>
  
  <input type="submit" value="Submit">
</form>

Result:

Conclusion

The :required pseudo-class is a helpful tool for enhancing user experience on forms. By properly styling required fields, users can easily identify which fields need to be filled out before submission.