The :required and :optional pseudo-classes in CSS allow you to style form elements based on whether they are required or optional. These pseudo-classes make it easier to provide visual cues about which inputs must be filled out.

How They Work

1
:required – Selects form elements that have the required attribute.
2
:optional – Selects form elements that do not have the required attribute.
3
These pseudo-classes update dynamically as the user interacts with the form.

Example: Using :required and :optional

In this example, required inputs have a red border and light red background, while optional inputs have a green border and light green background, helping users identify which fields must be filled.

Best Practices

1
Use :required and :optional to visually distinguish mandatory fields from optional ones.
2
Combine with :focus or :valid/:invalid for dynamic feedback.
3
Ensure color contrast and other cues are clear for accessibility.
4
Test across different browsers, as styling may vary slightly for form elements.

Difficulty: 3/10

Topics: CSS pseudo-classes, form validation styling, user experience feedback

Scenario Questions

0-2 years experience

1
How would you make required form fields show a red border and optional ones a gray dashed border using CSS?
2
What happens if you forget to add the required attribute in HTML but try to style it with :required in CSS?

2-5 years experience

1
A form works fine in development but the required field indicators don’t show up in production — what could be breaking this, and how would you debug it?
2
Your team’s design system uses custom checkboxes, but :required isn’t styling them — how do you fix this without changing the HTML structure?

5-8 years experience

1
You’re building a dynamic form builder where fields can toggle between required and optional — how do you ensure the CSS styling remains performant and doesn’t cause layout thrashing?
2
How would you design a scalable form component library that uses :required and :optional while supporting theme switching and accessibility compliance across multiple products?

8+ years experience

1
We’re migrating a legacy form system that relies on JS-driven validation classes — how do you phase in native CSS :required/:optional without breaking existing behavior or QA test suites?
2
How would you advocate for adopting :required and :optional across 20+ products when engineering teams are resistant due to inconsistent browser support in older internal tools?

Follow-up Questions

❓What happens if a field has both required and pattern attributes?
❓How would you handle this if the form is dynamically generated via JavaScript?
❓Would you use these pseudo-classes in a design system? Why or why not?