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

From the creator

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

Published 2019-10-02 · Watch on YouTube ↗
Availability and playback restrictions are controlled by the original channel.