:user-valid / :user-invalid

Baseline 2023 (Chrome 119, Safari 16.5, Firefox 88); `:user-invalid` disponible de forma generalizada desde mayo de 2026.

Chrome 119Edge 119Safari 16.5Firefox 88

Como `:valid`/`:invalid`, pero solo después de que el usuario haya interactuado con el campo, así que un campo obligatorio no aparece en rojo al cargar la página. Da validación en línea correcta con cero JS.

CSS

.fx-016 {
  font-family: system-ui;
  display: grid;
  gap: 4px;
  max-width: 320px
}
.fx-016 input {
  padding: 8px;
  border: 1px solid #bbb;
  border-radius: 6px
}
.fx-016 input:user-valid {
  border-color: #16a34a
}
.fx-016 input:user-invalid {
  border-color: #dc2626
}
.fx-016-err {
  display: none;
  color: #dc2626
}
.fx-016:has(input:user-invalid) .fx-016-err {
  display: block
}
.fx-016 :is(a,button,input,select,textarea):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

HTML

<form class="fx-016">
  <label>Email <input type="email" required placeholder="[email protected]"></label>
  <small class="fx-016-err">Enter a valid email address.</small>
</form>

Fallback: No hace falta ninguno; si no está soportado, el campo simplemente no se colorea.

Fuente: web.dev/blog/baseline-digest-may-2026

Prompt

Estiliza la validación de formularios con `:user-invalid` y `:user-valid` en vez de `:invalid`, para que los errores aparezcan solo después de que el usuario haya escrito o salido del campo. Muestra el texto de error con `.field:has(input:user-invalid) .error { display:block }`. Mantén los atributos nativos `required`, `type` y `pattern` como fuente de validación en lugar de JS.