Future CSS Tip! ⚡️ You can combine CSS :has() & :user-valid/:user-invalid to power micro interactions 😍 No JavaScript. Watch for the little animations ✨ label { --color: var(--default); color: var(--color); border-color: var(--color); } .group:has(:user-valid) { --color: var(--valid); } .group:not(:focus-within):has(:user-invalid) { --color: var(--invalid); } These new pseudo-elements only fire once... an input has been interacted with. This means you don't need to do things like the "transparent :placeholder-shown" hack from before 🙌 Then you can lean into the power of scoped custom properties and change the theme based on the status of a form group 😎 It's a nice little touch. But remember, don't rely on color to communicate things! CodePen.IO link below! 👇show more

Here's that @CodePen link! 🚀 Wildly. This one has "varied" support atm. It works in Safari Technology Preview ✅ In Chrome 118 it works to activate but then doesn't deactivate 🤔 In Firefox, the :has() flag in Nightly doesn't work for me atm 🥲

You could already do this if you have access to :has() 👀 But it requires somewhat of a transparent placeholder hack 🤓 .group:not(:focus-within):has(:invalid:not(:placeholder-shown)) { ... } Here's the @CodePen for that way 👇

Man! 😲

You can do a version with :has() alone. But it isn't as clean as using :user-valid/:user-invalid IMO 🤓

Pretty hot 🔥🔥🥵

We're trying! 😍

I wonder if you can combine this with :after { content: “invalid email”; } somewhere above the input.

You could! 💯 An explicit element could be an easier solution to maintain. The idea here is also that I'm leaning into the built-in validation of the browser. So you would get the little browser built-in tooltips 🤓

@pikaso_me screenshot this

@jh3yy Here's your screenshot. ⚡ Want to automatically post your tweets on Instagram? Visit