# Clear Valid and Invalid States for Form Fields

> Colors form fields red with a short hint once a visitor has interacted with them and entered something invalid, without flagging untouched empty fields.

- Type: CSS
- Runs: Site-wide header
- Category: [Forms](https://wpide.com/library/category/forms/)
- Tags: forms, validation, css
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/form-validation-states-css/

## Code

```css
:root {
    --wpide-invalid: #c62828;
    --wpide-valid: #2e7d32;
}

form input:user-invalid,
form select:user-invalid,
form textarea:user-invalid {
    border-color: var(--wpide-invalid);
    outline-color: var(--wpide-invalid);
    background-image: linear-gradient(to right, var(--wpide-invalid), var(--wpide-invalid));
    background-size: 3px 100%;
    background-repeat: no-repeat;
}

form input:user-valid:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
form textarea:user-valid {
    border-color: var(--wpide-valid);
}

form input[type="checkbox"]:user-invalid,
form input[type="radio"]:user-invalid {
    outline: 2px solid var(--wpide-invalid);
    outline-offset: 2px;
}
```

## Notes

Uses the :user-invalid selector supported by current browsers; older browsers simply show no color change.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Clear Valid and Invalid States for Form Fields" in its snippet library and add it in one click; or create a new CSS snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/