CSS :required Pseudo Clas

CSS :required Pseudo-Class

The :required pseudo-class selects input fields that have the required attribute in an HTML form. It is useful for styling required fields to guide users effectively.

1. Syntax

input:required {
  border: 2px solid red;
}

✅ This applies a red border to all required input fields.

2. Example – Highlight Required Fields

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

input:required {
  border: 2px solid red;
  background-color: #fff5f5;
}

input:required:focus {
  border-color: blue;
  outline: none;
}

✅ Required fields will have a red border and a light red background.
✅ When focused, the border color changes to blue.

3. Styling Required Fields with Icons

input:required {
  border: 2px solid red;
  background-image: url('warning-icon.png');
  background-position: right;
  background-repeat: no-repeat;
  padding-right: 20px;
}

✅ Adds a warning icon to required fields.

4. :required with :valid & :invalid

input:required:valid {
  border: 2px solid green;
}

input:required:invalid {
  border: 2px solid red;
}

✅ Green border for valid input, red border for invalid input.

5. Example – Styling Different Field Types

input[type="text"]:required {
  border-color: orange;
}

input[type="email"]:required {
  border-color: blue;
}

✅ This customizes styles based on the input type.

6. Browser Support

✅ Fully supported in Chrome, Firefox, Edge, and Safari.
❌ Not supported in Internet Explorer 9 and earlier.

7. Best Practices

✔ Use :required to guide users visually.
✔ Combine with :valid and :invalid for better user experience.
✔ Avoid over-styling to keep form design clean.