GitHub

Install it as an agent skill

npx skills@latest add vojtaholik/good-css

For Claude Code, Codex, Cursor and any other agent that reads skills. The source and the other ways to install are on GitHub.

Entry 07

Form feedback with :user-invalid

Use it for inline form validation, in place of blur listeners and a "touched" class.

Open
The field has no color on load. Type three characters and leave it: the border takes the danger color. Eight or more and it takes the success color.
Code CSS · HTML · 2 blocks · 3 lines 
input:user-invalid { border-color: var(--danger); }
input:user-valid { border-color: var(--success); }
<input type="password" required minlength="8">
Why it works, the rules and the credits 2 reasons · 2 rules · support · credits

Why it works

  1. :invalid matches an empty required field on page load. The :user- versions match only after the user has edited the field or tried to submit.
  2. Validity comes from HTML attributes: required, minlength, type, pattern.

Rules

  1. Color alone is not enough feedback. Pair it with text or an icon.
  2. The server still validates.

Support

Chrome
119
Firefox
88
Safari
16.5

Credits

Borrowed from: Kevin Powell, Improve forms with :user-valid and :user-invalid, 2025-02-20, and Use these CSS features instead of JavaScript, 2026-09-23

05 / 08 8 entries

Interaction

  1. 01 One focus ring with :focus-visible
  2. 02 Hover styles only where hover exists
  3. 03 Press feedback
  4. 04 Hit area larger than the visual
  5. 05 Whole card clickable from one link
  6. 06 :has() for parent and page state
  7. 07 Form feedback with :user-invalid
  8. 08 Textarea that grows with its content