How is this possible with CSS only?!

I’ve done reaction videos in the past where I looked at crazy codepens, and today, we’re starting a new series where I find one such codepen and see if I can understand how it was created, with a dive into the :has() pseudo-class, which is now supported in Chrome and Safari.

🔗 Links

⌚ Timestamps
00:00 - Introduction
00:51 - what I'm trying to copy
04:20 - Setting up my custom properties
05:01 - Using :has()
06:18 - setting up the different states
10:54 - Adding the shaking animation
12:51 - removing the animation when the input is empty
16:54 - changing the style of the button when everything is valid
19:55 - should I do more videos like this one?

#css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[KevinPowell]

You'll still want to use some proper validation on your forms, but for these client-side hints can make for some big improvements from a UX side of things, and it's just one of the cool things we can do with :has(), it opens up a lot of other doors as well!

[djdx]

I like this style Kevin, where you and the viewers are learning/experimenting at the same time. Not just you saying this that this that, you are learning as we are!

[sharkinahat]

There's always something I learn from these videos. Today I learned that has() is awsome and that a placeholder pseudo-element exists.

[sergeyvolodin]

Hello, Kevin, you create an amazing and nessesary content ) I’m from Russia and I work as a frontend developer. My main problem was how to create really responsive websites without any difficulties and you and your content have helped me to increase the quality of my knowledge about responsive web design. Have a good day, dude 🙂🙂

[zachjensz]

Another good UX addition could be cursor: not-allowed on the button when it's greyed out.

[neoqwerty]

The HAS:() pseudoclass is also supported in Firefox, but you gotta enable it as an experimental configuration! (I was looking for a good workaround to have some of my table headers change background if they used headers in their content, with a rough fallback if "has" isn't supported.)

[GerritforBazeja]

Nice to validate a form this way. Nice upgrade for the form!

[kierandansey]

This is really helpful, thank you very much! I have been using js to manage form validation state primarily because of the form being invalid when the page first loads and having to juggle css selectors cross browser is a "pain in the css". But this approach is actually rather simple and logical, as soon as I saw the has(:placeholder-shown) selector it clicked what he was doing. Very clever!

[canadianavenger]

Very cool, it's amazing how far CSS has come. Might be an interesting exercise to see if you can re-create it without using the experimental `has` pseudo-class.

[CanadianPenny]

Definitely the letter flipped thing, please. That's what I clicked on the vid for. :)

[hirendarkarthikeyan]

Hi Kevin, you are such an inspiration to me and changed my life

[theconsciousness]

Thanks for explaining everything so thoroughly.

[JansenTeam]

That was interesting! Yes, I would like to see the css for the spinning letters, please.

[CirTap]

**don't bother to regex your email fields!** whatever you enter, it's likely incomplete and breaks with intl. address formats, names, and RFC mail extensions.
HTML provides the email input type for a reason, which performs a validation check against valid email address patterns. It will work better than any random regex you can find or come up.

[mdshohidulislam]

Amazing to see how things start from scratch ..

[bilalsalmi]

I'm currently learning javascript, but after watching some of your CSS-only video series, I would rethink of the purpose of using js in some cases where it could be done just with CSS . JS is decreasing speed and performance of websites, js forms as calculator compared to mental-math, it's makes us more and more stupid . kevin Powell::after : { content : 'thank you so much for just amazing content' }

[ACE]

19:17 USE "pointer-events: none;" and "pointer-events: auto;" to disable btn in invalid state and enable in valid :)

[markuserdmann]

Wonderful! We really need :has()! Maybe you can disable your submit button with pointer-events: none while the form is invalid to prevent the submit?

[markboots_]

probably Kevin made this tutorial earlier. But last tuesday Chrome v105 is released which includes the :has() selector. So it should work without the flag (make sure you have updated to the latest chrome version)

[trinkel]

Damn. I just finished a form at work and now I want to start over. I checked out the spinning letters in CodePen and it's really quite simple.