Pseudo and pseudon���t

I like CSS pseudo-classes. They come in handy for adding little enhancements to interfaces based on interaction.

Take the form-related pseudo-classes, for example: :valid, :invalid, :required, :in-range, and many more.

Let���s say I want to adjust the appearance of an element based on whether it has been filled in correctly. I might have an input element like this:

Then I can write some CSS to put green border on it once it meets the minimum requirements for validity:

input:valid {
border: 1px solid green;
}

That works, but somewhat annoyingly, the appearance will change while the user is still typing in the field (as soon as the user types an @ symbol, the border goes green). That can be distracting, or downright annoying.

I only want to display the green border when the input is valid and the field is not focused. Luckily for me, those last two words (���not focused���) map nicely to some more pseudo-classes: not and focus:

input:not(:focus):valid {
border: 1px solid green;
}

If I want to get really fancy, I could display an icon next to form fields that have been filled in. But to do that, I���d need more than a pseudo-class; I���d need a pseudo-element, like :after

input:not(:focus):valid::after {
content: '���';
}

���except that won���t work. It turns out that you can���t add generated content to replaced elements like form fields. I���d have to add a regular element into my markup, like this:

So I could style it with:

input:not(:focus):valid + span::after {
content: '���';
}

But that feels icky.

Update: See this clever flexbox technique by Hugo Giraudel for a potential solution.