How to create an expanding search bar using :focus-within

A look at a fun expanding search bar without the need for any JavaScript by leveraging the power of focus-within! I do use SCSS for this one, but it should be pretty easy to follow along if you aren't familiar with it, and as I say in the video if you aren't sure, check the Codepen below where you can toggle on the compiled CSS.

CodePen: https://codepen.io/kevinpowell/pen/jONomrd
Custom Properties (CSS variables) series: https://www.youtube.com/playlist?list=PL4-IK0AVhVjOT2KBB5TSbD77OmfHvtqUi
BEM: https://youtu.be/SLjHSVwXYq4

#scss #css

---
Come and hangout, ask questions, suggest ideas, and meet some awesome people over in The Community: https://discord.gg/nTYCvrK

I have a newsletter! https://www.kevinpowell.co/newsletter

I've been working on some courses! Find out more: https://www.kevinpowell.co/courses

---

My Code Editor: VS Code - https://code.visualstudio.com/

How my browser refreshes when I save: https://youtu.be/h24noHYsuGc

---

Support me on Patreon: https://www.patreon.com/kevinpowell

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.

Instagram: https://www.instagram.com/kevinpowell.co/
Twitter: https://twitter.com/KevinJPowell
Codepen: https://codepen.io/kevinpowell/
Github: https://github.com/kevin-powell

Видео How to create an expanding search bar using :focus-within канала Kevin Powell