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.
Opens WPIDE on
Code
: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 add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.