Open the giving page on most church websites and the form is already annoyed with you. The amount field is outlined in red. The email field is red. You haven't typed anything, you haven't done anything wrong, and the page is already implying that you have.
The default :invalid selector works this way in every browser — an empty required field is invalid the moment the page loads, so any red styling attached to it fires immediately. Most sites paper over this with a JavaScript library that tracks whether each field is "dirty" yet. It's a lot of code for a mood.
A single line of CSS now does the job.
input:user-invalid,
textarea:user-invalid {
border-color: var(--warning);
}
:user-invalid only matches after someone has interacted with the field and left it in an invalid state — after typing something wrong, or after tabbing past a required field without filling it. Before that, it stays quiet. The matching :user-valid pseudo-class only fires once the field is filled in correctly, so a subtle green cue on a completed email or amount is a two-line addition.
It reached Baseline in every major browser back in late 2023 and is fully Baseline-available now, and the fallback is the friendliest kind: older browsers see no styling from these selectors, which is exactly the "don't yell" behavior we were trying to get to in the first place.
A few places this quietly changes the feel of a faith-based site:
- Donation forms stop flagging the giving amount before a donor has typed a number.
- Contact and prayer request forms stay calm while someone is still writing.
- Event RSVPs wait until a guest has actually skipped a required field before pointing it out.
The point is not the pseudo-class. It is that a first-time giver, already a little nervous about entering their card number, doesn't need the page suggesting they've done something wrong before they've done anything at all. Good form validation is quiet at the start of a field and helpful at the end of it.
If your church or nonprofit donation form has quietly grown red on first paint, we can help calm it down — usually in less time than it takes to argue with the JavaScript library that's currently doing the yelling.