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:

<input type="email" required>

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:

<input type="email" required>
<span></span>

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.

Have you published a response to this? :

Responses

SelenIT

input:not(:focus):valid — чтобы «светофор» валидации поля не отвлекал при наборе. Полезная идея Джереми Кита: adactio.com/journal/10000

# Posted by SelenIT on Friday, December 18th, 2015 at 8:28am

Ryan

Oh yea good call! input:not(:focus):valid - show validation styles when the value’s accepted but no longer focused adactio.com/journal/10000

# Posted by Ryan on Friday, December 18th, 2015 at 2:38pm

Si

A some-what icky but neat trick to styling valid inputs in a less obtrusive manner adactio.com/journal/10000

# Posted by Si on Monday, January 4th, 2016 at 2:21pm

1 Like

# Liked by Marc Drummond on Thursday, December 17th, 2015 at 6:57pm