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/jO...
Custom Properties (CSS variables) series:    • CSS Custom Properties  
BEM:    • Why I use the BEM naming convention f...  

#scss #css

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

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:    • How to automatically refresh your bro...  

---

Support me on Patreon:   / 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:   / kevinpowell.co  
Twitter:   / kevinjpowell  
Codepen: https://codepen.io/kevinpowell/
Github: https://github.com/kevin-powell