Video wird geladen...

Video konnte nicht geladen werden

Beim Laden dieses Videos ist ein Problem aufgetreten. Dies könnte an einem vorübergehenden Netzwerkproblem liegen oder das Video ist möglicherweise nicht verfügbar.

Suuuper handy new CSS: :user-invalid and :user-valid pseudo selectors let you style inputs only once they have been interacted with Just landed in Chrome + Safari, been in Firefox for years.

Wes Bos

437,645 subscribers

177,399 Aufrufe • vor 2 Jahren •via X (Twitter)

Wissenschaft & Technologie Bildung Gaming

Anya Rossi• Live Now

Private livecam show

10 Kommentare

Profilbild von Gordon Shumway

Gordon Shumwayvor 2 Jahren

This is great! I had to use JS to achieve same functionality multiple times.

Profilbild von Wes Bos

Wes Bosvor 2 Jahren

There is some angular form validation library that does it on keyup, and i can always tell it's angular because after the first keystroke it yells at you for it being invalid

Profilbild von Alex Painter

Alex Paintervor 2 Jahren

At some point this is all going to be too easy. What do we do then? Jokes aside, this is 🔥

Profilbild von Wes Bos

Wes Bosvor 2 Jahren

go outside? Or make another JS framework

Profilbild von Ben Bennitt

Ben Bennittvor 2 Jahren

Working on form validation today. Wes and the X algo delivering 👊

Profilbild von Steve Rios

Steve Riosvor 2 Jahren

VERY nice!

Profilbild von Alexey Lyakhov

Alexey Lyakhovvor 2 Jahren

How long it will take for tailwind to support user-valid/invalid ?

Profilbild von Wes Bos

Wes Bosvor 2 Jahren

Looks like it's already been added, but not yet shipped. You can use [&:user-invalid]:border-red-500 with arbitrary syntax until then

Profilbild von Eddy Erkelens 🧑‍🏫

Eddy Erkelens 🧑‍🏫vor 2 Jahren

@argyleink This should have been launched in 2020. But nevertheless: nice! Handy and usefull!

Profilbild von Juan

Juanvor 2 Jahren

@midudev =O!!

Ähnliche Videos

use CSS :has() & :user-valid/invalid to power form micro-interactions .group:has(:valid) { --color: var(--valid); } input:user-invalid + .error { display: block; } :user-valid/invalid detects if an input is valid and if it has been interacted with 🔥 no js dirty checkin' 🤙

use CSS :has() & :user-valid/invalid to power form micro-interactions .group:has(:valid) { --color: var(--valid); } input:user-invalid + .error { display: block; } :user-valid/invalid detects if an input is valid and if it has been interacted with 🔥 no js dirty checkin' 🤙

jhey ʕ•ᴥ•ʔ

53,503 Aufrufe • vor 1 Jahr

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! 👇

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! 👇

jhey ʕ•ᴥ•ʔ

284,005 Aufrufe • vor 3 Jahren

I’ve been building Liquid Glass for the Web this last week. Works in all the major browsers including Chrome, Firefox and Safari. It’s open source and free for anyone to use

I’ve been building Liquid Glass for the Web this last week. Works in all the major browsers including Chrome, Firefox and Safari. It’s open source and free for anyone to use

Sam Asante

99,882 Aufrufe • vor 2 Monaten

Man that’s been in America for 60 years detained by ICE For 23 years he’s only been required to check in with ICE once a year to remain in America, despite being without legal status He has severe illnesses, taxpayers likely have been paying for, and was detained in California

Man that’s been in America for 60 years detained by ICE For 23 years he’s only been required to check in with ICE once a year to remain in America, despite being without legal status He has severe illnesses, taxpayers likely have been paying for, and was detained in California

Wall Street Apes

512,385 Aufrufe • vor 8 Monaten

If you have a EDR/HDR display, try this little mesh gradient Playbit demo on desktop in Chrome (only works in chrome and safari dev preview since we use async wasm) Built with our new wide-gamut webgpu renderer, shipping in a few weeks

If you have a EDR/HDR display, try this little mesh gradient Playbit demo on desktop in Chrome (only works in chrome and safari dev preview since we use async wasm) Built with our new wide-gamut webgpu renderer, shipping in a few weeks

Rasmus Andersson

34,398 Aufrufe • vor 1 Monat

Strange how living with foxes for 15 years and before that, many years in the field photographing them, makes my views invalid. However a farmer with his livelihood invested in the discussion is the only valid opinion. Double standards don't you think. #FoxOfTheDay

Strange how living with foxes for 15 years and before that, many years in the field photographing them, makes my views invalid. However a farmer with his livelihood invested in the discussion is the only valid opinion. Double standards don't you think. #FoxOfTheDay

Richard Bowler

51,617 Aufrufe • vor 3 Monaten

What you all have been waiting for. A Reverse Trade Tracker. I did forget that once you go to the user profile it says THIS USER HAS REVERSED XXX TRADES. with red letters BIG LETTERS HMU if u wanna test, and if anyone is kind enough maybe scribble some logo for the extension

KrisGFX

80,049 Aufrufe • vor 10 Monaten

y'all keep asking in the comments, so here's the tea☕️ •her user is KoalaKoala on ig/tt •she is 29 and her bf is 27 •they met in nyc and have been together for 4+ years •they live in a small town in montenegro •apparently he can't speak english😭

y'all keep asking in the comments, so here's the tea☕️ •her user is KoalaKoala on ig/tt •she is 29 and her bf is 27 •they met in nyc and have been together for 4+ years •they live in a small town in montenegro •apparently he can't speak english😭

Folk ⸆⸉ Swift Charts

4,356,530 Aufrufe • vor 10 Monaten

For over 100 years, FF & FG have been running this state & they haven't been working in your best interests. Now you have a chance to vote for a new government with new ideas and a fresh approach. You can vote for change. Vótáil Sinn Féin. #GE2024

Sensitive content

For over 100 years, FF & FG have been running this state & they haven't been working in your best interests. Now you have a chance to vote for a new government with new ideas and a fresh approach. You can vote for change. Vótáil Sinn Féin. #GE2024

Sinn Féin

29,444 Aufrufe • vor 1 Jahr

Banks reveals he’s up 500% investing in Chrome Hearts “Like 20% of my net worth is in Chrome. It’s been the best thing that I’ve invested in the last two years” Tristan Thompson: “Chrome has become almost like how Hermès and Birkins have been in terms of investments” Banks: “Name anything that’s outperformed Chrome in the last four years. Seriously, retail-wise, you really can’t”

Banks reveals he’s up 500% investing in Chrome Hearts “Like 20% of my net worth is in Chrome. It’s been the best thing that I’ve invested in the last two years” Tristan Thompson: “Chrome has become almost like how Hermès and Birkins have been in terms of investments” Banks: “Name anything that’s outperformed Chrome in the last four years. Seriously, retail-wise, you really can’t”

Jack

120,244 Aufrufe • vor 3 Monaten

🚨 JUST IN: President Trump just MIC DROPPED every Democrat in America 🫳🏻🎤 "The guy in Maine with a swastika! They've been calling me a NAZI for TEN YEARS. And now, they have a NAZI RUNNING! I've been denying it for 10 years. I don't think they can call me it anymore!"

🚨 JUST IN: President Trump just MIC DROPPED every Democrat in America 🫳🏻🎤 "The guy in Maine with a swastika! They've been calling me a NAZI for TEN YEARS. And now, they have a NAZI RUNNING! I've been denying it for 10 years. I don't think they can call me it anymore!"

Eric Daugherty

570,154 Aufrufe • vor 2 Monaten

The results of the raffle have been produced. Congratulations to email spa************@gmail.com user for winning. I'll get in touch with you and refund the purchase price. Don't be discouraged, everyone else has a chance to win in the future. Congratulations again!

The results of the raffle have been produced. Congratulations to email spa************@gmail.com user for winning. I'll get in touch with you and refund the purchase price. Don't be discouraged, everyone else has a chance to win in the future. Congratulations again!

绯樱嘤

17,027 Aufrufe • vor 1 Jahr

The news are showing a Kherson FPV attack video today. This isn’t new, it’s called the Human safari and russians have been doing it for years. They hunt civilians for sport and boast about it. I’ve watched it happen with my own eyes and the only word to describe it is terrorism

The news are showing a Kherson FPV attack video today. This isn’t new, it’s called the Human safari and russians have been doing it for years. They hunt civilians for sport and boast about it. I’ve watched it happen with my own eyes and the only word to describe it is terrorism

Caolan

70,011 Aufrufe • vor 1 Monat

🇺🇸🇮🇱 Candace Owens' Powerful Message to Americans: “Do not send your sons and daughters to fight in this planned war. They have been planning this war for years. Do not believe them when they say they have WMD's. They have been trying this strategy for years, in various countries they want war with.” 🔥🔥🔥

🇺🇸🇮🇱 Candace Owens' Powerful Message to Americans: “Do not send your sons and daughters to fight in this planned war. They have been planning this war for years. Do not believe them when they say they have WMD's. They have been trying this strategy for years, in various countries they want war with.” 🔥🔥🔥

Censored Men

973,152 Aufrufe • vor 2 Jahren

There's a new fancy restaurant just opened in town! I've wanted to try this place for ages and I'm so excited that they finally have one in Newcastle. Have you been yet?

There's a new fancy restaurant just opened in town! I've wanted to try this place for ages and I'm so excited that they finally have one in Newcastle. Have you been yet?

Geordie Gifts

15,888 Aufrufe • vor 7 Monaten

They have been pushing the same narrative in an attempt to brainwash you for over 100 years

They have been pushing the same narrative in an attempt to brainwash you for over 100 years

Christian Ascania

27,848 Aufrufe • vor 10 Monaten

Democrats have been calling for national redistricting reform for YEARS to make sure the people have the power, while Republicans have only been interested in expanding their own power. We’re not going to let that slide in Maryland — not on our watch.

Democrats have been calling for national redistricting reform for YEARS to make sure the people have the power, while Republicans have only been interested in expanding their own power. We’re not going to let that slide in Maryland — not on our watch.

Wes Moore

10,125 Aufrufe • vor 1 Monat

Harlem resident and walker user Linda Crowell said it's impossible for her to reach her fifth-floor apartment at 220 Bradhurst as the building's only elevator has been out of service since September 2025. As a result, Crowell said she's been withholding rent for the apartment she's lived in 25 years. More:

Harlem resident and walker user Linda Crowell said it's impossible for her to reach her fifth-floor apartment at 220 Bradhurst as the building's only elevator has been out of service since September 2025. As a result, Crowell said she's been withholding rent for the apartment she's lived in 25 years. More:

Eyewitness News

26,012 Aufrufe • vor 15 Tagen

This little girl has been missing for two years and they just found her under a staircase in New York. Glad she is safe.

This little girl has been missing for two years and they just found her under a staircase in New York. Glad she is safe.

Derrick Evans

151,482 Aufrufe • vor 11 Monaten