# :user-valid / :user-invalid

Status: Baseline 2023 (Chrome 119, Safari 16.5, Firefox 88); `:user-invalid` seit Mai 2026 breit verfügbar.  
Quelle: https://web.dev/blog/baseline-digest-may-2026  
Seite: https://designforai.dev/de/css/user-valid-user-invalid

Wie `:valid`/`:invalid`, aber erst nachdem der Nutzer mit dem Feld interagiert hat, sodass ein Pflichtfeld beim Seitenladen nicht rot ist. Ergibt richtige Inline-Validierung mit null JS.

## HTML

```html
<form class="fx-016">
  <label>Email <input type="email" required placeholder="you@example.com"></label>
  <small class="fx-016-err">Enter a valid email address.</small>
</form>
```

## CSS

```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; }
```

Fallback: Keiner nötig; ohne Unterstützung wird das Feld einfach nicht eingefärbt.

## Prompt

Style die Formularvalidierung mit `:user-invalid` und `:user-valid` statt `:invalid`, damit Fehler erst erscheinen, nachdem der Nutzer getippt oder das Feld verlassen hat. Zeige Fehlertext mit `.field:has(input:user-invalid) .error { display:block }`. Behalte die nativen Attribute `required`, `type` und `pattern` als Validierungsquelle statt JS.