Оффлайн
- Регистрация
- 1 Мар 2015
- Сообщения
- 1,481
- Баллы
- 155
If you’re a web developer like me, you’ve probably styled a form before.
And if you’re anything like me, you’ve tried to be helpful — maybe you added some color changes with input:valid or input:invalid, outlined fields, maybe even threw in a little transition effect.
But then this came to your mind: Wait, why is this field showing up as valid before the user even typed anything? ?
You try to be nice to users. Give them visual cues. Maybe you change the border color on a valid input, or show a message when they make a mistake.
You think you’re doing a good thing.
But then someone opens your form and sees green borders before they’ve even clicked a thing.
Here’s the deal
CSS pseudo-classes like :valid and :invalid don’t wait for the user to interact.
If the input field meets the required rules on page load (or fails them), the styles apply instantly.
That’s why your untouched email field might already look like a success story. Not cool.
But the real solution? It’s brand new:
*They wait for user interaction.
*
Nothing changes until the user actually types, blurs, or otherwise engages with the input. Now that’s user-friendly feedback.
What It Means For You
If you’re still using :valid/:invalid on untouched fields, you're frustrating users. They’re seeing red borders before they’ve even typed anything. Or worse—green borders that falsely imply their input is good.
By switching to :user-valid and :user-invalid, your forms become:
...
And if you’re anything like me, you’ve tried to be helpful — maybe you added some color changes with input:valid or input:invalid, outlined fields, maybe even threw in a little transition effect.
But then this came to your mind: Wait, why is this field showing up as valid before the user even typed anything? ?
The problem
You try to be nice to users. Give them visual cues. Maybe you change the border color on a valid input, or show a message when they make a mistake.
You think you’re doing a good thing.
But then someone opens your form and sees green borders before they’ve even clicked a thing.
Let’s not even talk about accessibility. Using just colors for feedback? That’s a hard “no” if you care about users with color blindness.
Here’s the deal
CSS pseudo-classes like :valid and :invalid don’t wait for the user to interact.
If the input field meets the required rules on page load (or fails them), the styles apply instantly.
That’s why your untouched email field might already look like a success story. Not cool.
But the real solution? It’s brand new:
These two pseudo-classes work exactly how you always wanted :valid and :invalid to behave:
*They wait for user interaction.
*
Nothing changes until the user actually types, blurs, or otherwise engages with the input. Now that’s user-friendly feedback.
What It Means For You
If you’re still using :valid/:invalid on untouched fields, you're frustrating users. They’re seeing red borders before they’ve even typed anything. Or worse—green borders that falsely imply their input is good.
By switching to :user-valid and :user-invalid, your forms become:
...