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

I nI need a simple search bar with microphone

u r a great person

Amazing

Why isn’t the nesting working for me

Absolutely wicked! You open a whole new world for me with the focus-within and cubic-bezier, Although ill have in mind what StJohn3D said 👌😄. Thank you Kevin! ,you are great mate! Always great videos.

KING 👑

what we do if we want expand search bar from right to left ?

this was VERY helpful!

how to create a search box that can search photo from local host with out linking the photos in the html. please help me .

I was watching this just like watching my favourite tv show with a cup of coffee. I'd love to be as good as you someday(even tho css gives me headaches hhhh). Thanks man keep up the good word!!

the real trick is by setting position: absolute; for input element .. so we it will gain focus automatically and we can directly start typing as it will pop up from the DOM and be on top of submit .. but if we remove that property and put it in submit instead .. nothing will work .. thank you Kevin for all the rare quality content you're giving us for free

fucking hell why is this video 32 minutes long, it should be 32 seconds long

Great video! Thanks man! Just one question: what happens if user types something and click elsewhere instead of the search button? Will the search bar remain expanded?

How to keep the search bar open if there is content inside it

one word... AWESOME!

Why dont you use scss variables but use css3 variables instead?

Thank you

time to update that monitor kevin :P

you are great

Regarding you last point about the animation feeling faster on larger widths, is it possible to set the animation duration to something like a calc(Xms * 100vw)?

Your channel is amazing. I used to hate CSS when I first got into web development, just because of how complex it is and how little I knew at the time. And how some things seemed counter-intuitive. Over the years, as I learned the gotchas and nuances, I've gained more and more confidence in my CSS ability, and I do like it now. But your content is invaluable. If only I discovered you sooner, haha.

Thanks for detailed explanation, just ran in to a problem

Excellent, I had to make some changes to have it fit within my Time Traveler website, but after some modifications, I finally got it to function. Thank you for sharing this!

I doubt you’ll respond to me but I’m having a lot of trouble trying to put that exact search bar in my own website. I need some help

this is soooo cool +.+

Hey Kevin Powell, great trick. Already used this trick on my page because of you. But weird problem: Safari (at least on iOS, don't know about desktop) does not horizontally center the search icon. Neigher on my slightly different implementation nor on your code. It sticks to right. As I do not have (or intend having) a Mac, I can't debug it and do not know, what causes this error. Any suggestions?

hello sir, i love watching your videos. can you make a video of a part of a website that looks as if flipping pages of a book (eg. a services page that has a book with pages of OUR SERVICES- page1 for service 1, page2 for service2 and so on)

How to make that search bar only expandable from right to left? The opposite direction of yours.

Nice tutorial as always! Thanks Kevin!!! I noticed that about the border radius too. Not sure if anyone had pointed this out yet (since it's been a year) but in px value, border-radius maxes out at 32px (I'm not sure why but there's probably some reasonable math behind this lol)

I'm starting now with CSS, HTML and JS and you teach very well! Learning a lot with you

Wow that search bar looks so cool Kevin! This is my first comment on your videos, but I really want to say thank you - I did watched like 50 videos in just the last two days whereas I am subscribed to you since the last year or so. I really appreciate your tutorials and have to admit that in comparison to your older videos you have improved so much in all aspects of being a scholar. I did not know focus-within before, I can see all those possibilities by using that one 😉

Thats all what I've wanted to say ✔️

Hey Kevin, I do love your videos. I just get frustrated when I follow along and something doesn't work. I do realize that this particular video is over a year and a half old so things may have changed. I did finally get this to work on a test page but not in production, I'm sure that's my fault. The more frustrating thing though is when I do follow along and then I go to your CodePen to check my work and find that the CodePen is completely different from the Tutorial. It would also be helpful if you had one CodePen for the base project and then another for the Final. So that I don't have to type out all the code you just jump into. I know it would be a longer video if you had to detail the basic layout.

Maybe this is a silly suggestion, but if you want to use labels for accessibility purposes without displaying them couldn't you add labels in HTML and give them display: none in css? Screen readers would still pick up on them even if they're not displayed I think. Or would an aria-label accomplish basically the same thing?

I love sass, I can't go back to vanilla css anymore!

Couldn't you use for the input width: calc(100% - var(--size)); only instead of the opacity and cursor things?

then just use vh value for radius

Focus-within is the new checkbox! Love css only designs!

Wow... Let me think about this... Could we leverage focus-within to create the fabled parent selector? I feel some experimentation coming on. No doubt it'll end in circular logic just like every perpetual motion machine I come up with :D

This video is another reminder that I do need to get into variables. It's something I've been putting off forever. For one because from the beginning I did not like the syntax. Too long. Why not have some symbol and name - like PHP does. Even writing my colors in hex is quicker. Though then again, I am a masochist: I will painstakingly type out all my SMIL every time, calculate the beziers in my head without the visualizations, and for border radiuses I will check line-height, factor in padding and margins, and then use calc to divide all that by two - et voila! So beyond personal dislikes, I think it might have to do with perceived utility. Don't really need a shorthand for hexes. Other values? Maybe. Now, integers/floats would've been awesome - because I do use incrementable int variables for loops in PHP and C++ a whole lot - but vanilla CSS can't do that, can it? So that brings me back to another thing I need to get into: Sass.
Anyway, another great video! I think it's an art unto itself to search for solutions to problems using only the tools you have/methods you know - OR to find new and crazy way to use the most standard building blocks. I basically stopped playing video games and sudoku because HTML and CSS give you more fun and versatile puzzles, and solving problems they pose - whether by their inherent structure, or lack of browser support - is nothing short of exhilirating.

So we can use this as a replacement for onClick events can't we?

hey, how to make it when the search bar is focus within the outer search border extends only to the right? mine is extending both ways.

Great video and a very nice styling. One thing I was hoping you were going to address (and one that immediately jumped to mind at the very start of the video) was about whether you can view the text after the focus is lost. If this is a search for an on-screen filter, then having the text that is being used to filter would be important but after focus is lost, you cannot (visually) see that your results are undergoing a filter even through they are. I don't know if there is a pseudo selector for input having a value or not

The gaping string aetiologically seal because bead immuhistochemically collect via a hallowed exhaust. ashamed, fretful george

In video you need only one class of fontAwesome for one button. Are you thinking about hot extract only needed class from fontAwesome css and don't download whole css package with other unused styles?

Cool as always. I am probably too much "desktop developer" to NOT use keyboard focus within 😁. So very happy to see this used.
But what really drives me crazy with CSS is that we have once more arrived at a point where you have to code for different browsers. It was a milestone in the early 2000's when web standardization and CSS began to unite the worlds of Internet Explorer, Netscape, Opera and the likes. But here we are again ...

perfecto

Couldn't create that same search bar in codepen... my position absolute was not working