Skip to main content
PUBLIC.INTERNET
⚡ Acceso Inmediato🔒 Privacidad Primero🆓 Siempre Gratis📱 Funciona en Todos Lados

:user-valid / :user-invalid Form Previewer

The classic :valid and :invalid pseudo-classes have a long-standing flaw: a required field is :invalid the instant the page loads, so a naive red-border rule screams at people before they have typed a single character. The newer :user-valid and :user-invalid pseudo-classes fix this by matching only after the user has actually interacted with the field and moved on, which is exactly the timing you want for form feedback. This previewer is a live form wired with those pseudo-classes, plus controls to style them: set the Valid color and Invalid color, adjust Border width and Corner radius, and toggle an inline error message and a valid check mark. Because the pseudo-classes are native, the email, username, and website fields react on their own as you edit and blur them, with no JavaScript validation in the way. The CSS panel mirrors your settings as a clean, standalone rule set you can copy straight into a real form.

CSS

Live form
Enter a valid email address.
Username needs at least 3 characters.
That does not look like a full URL.
Type in a field and click away. The state shows only after you interact, not on page load. That is the difference from :valid / :invalid.
How to Style :user-valid and :user-invalid
  1. Set the state colors - Use the Valid color and Invalid color swatches to choose the border colors for each state.
  2. Shape the inputs - Drag Border width and Corner radius to match your form's style; the live fields update immediately.
  3. Choose the feedback - Toggle Show inline error message and Show check mark to decide what appears once a field is judged valid or invalid.
  4. Try the form - Type in the Email, Username, or Website field and click away to see the state apply only after interaction; use Reset to clear it.
  5. Copy the CSS - Click Copy to grab the standalone rule set and paste it onto your own form fields.
Why This Tool?
 Searching for how to validate or style a form without JavaScript turns up MDN and blog explainers about :user-valid, but nothing you can actually try and tweak. That is the gap this fills. Seeing the timing difference matters more than reading about it: load the page and the fields look neutral, then edit one and leave it, and only then does the state appear. That single behavior is the whole reason these pseudo-classes exist, and it is hard to appreciate from a code snippet. 
 Under the hood the form uses native constraint attributes (type="email", required, minlength, type="url") and lets CSS react to the result, so there is no validation script to maintain. A practical tip: pair :user-invalid with a sibling error message using input:user-invalid ~ .error-message { display: block } so the message and the border light up together, and keep your neutral border in the base rule so untouched fields stay calm. The copied CSS follows exactly that structure.