form control state and layered backgrounds to create input status strokes 😎
CSS Tip! ✨
You can lean into form control state and layered backgrounds to create input status strokes 😎
input:valid { --valid: 1; }
input {
background: var(--bg) padding-box, ...,
var(--valid-bg) calc((1 - var(--valid)) * 100cqi) 0 /
100% 100% border-box;
}
The trick is to layer up backgrounds using background-clip to leave a border space 🤏
Applying a transparent border gives you the space for the layered background to transition in 🎞️
Then you can use custom properties to dictate the background-position of each layer. By default, the valid and invalid layers are positioned outside the bounding box. But when one of those states is active, the background layer transitions in to 0 0.
To respect people's animations preferences, we can wrap that transition in a media query 🤙
@media (prefers-reduced-motion: no-preference) {
input { transition: background-position: 0.5s; }
}
Was revisiting techniques around :has and :user-valid and it dawned that you could do it like this too!
Hope you find it useful!
p.s Don't rely on color to communicate form status. It's a cool trick though for an added touch ✨
#ytshorts #html #css #javascript #programming #trendingshorts #trend #youtubeshort #ytshort #yt #ytshortsindia #shortsvideo #shorts #shortsfeed #shortfeed #viral #trending
🎯 SUBSCRIBE to get more amazing AI Videos!
► https://www.youtube.com/@3sdcode?sub_...
Video Credit By: / jh3yy