How to create an expanding search bar using :focus-within
Vložit
- čas přidán 24. 07. 2024
- 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: codepen.io/kevinpowell/pen/jO...
Custom Properties (CSS variables) series: • CSS Custom Properties
BEM: • Why I use the BEM nami...
#scss #css
---
Come and hangout, ask questions, suggest ideas, and meet some awesome people over in The Community: / discord
I have a newsletter! www.kevinpowell.co/newsletter
I've been working on some courses! Find out more: www.kevinpowell.co/courses
---
My Code Editor: VS Code - code.visualstudio.com/
How my browser refreshes when I save: • How to automatically r...
---
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 CZcams channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
A trick for you Kevin: Always use border-radius: 100vh; and you will always get perfectly rounded corners.
hah, that's awesome and I never would have thought of that 👍
That's awesome. 😄
Thank you😀
Hello, you can explain how this exactly works, i'm don't understanding? Why I should use this? Thanks ^^
@@ectum_empra I wrote a short post about it in my blog recently. It's very simple, when you see it. csspoo.com/perfect-border-radius
I think you are one of the few web dev experts here on youtube who care about acessibility. I love that you mention aria-labels and tab focusing etc. Most people completely ignore this. Would be cool to see something about screen contrasts as well :)
I've mentioned it in one of my tip videos (looking at the Chrome inspect element thing that shows you the contrast), but a video devoted to it would be a good idea!
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!
You are an incredibly helpful resource, Kevin. Thanks again for all you do!
This is above my head rn but that's really cool. I am DEFINITELY going to be over doing all my animations at first because they are fun so good advice. Thank you!
I super love your quirkyness. You are like me except way more advanced computer skills! I absolutely love your shirt too!!
You're creative and talented, your CSS3 knowledge is next level, i wish one day i can achieve the same level as you ❤ Thanks Kevin Powell
I'm starting now with CSS, HTML and JS and you teach very well! Learning a lot with you
Love these "real world" solutions. Thanks, Kevin
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)
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.
Almost 10 years ago, I made this, but had to use JavaScript. Thanks for pointing out :focus-within!
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 ✔️
Very cool !! Learnt about focus within through this video.. Will definitely be helpful in my web projects. Thank you Kevin
For the border-radius issue (12:00), I'm guessing that % means the percent of its width and percent of its height, which are different in your case. Whereas, em/px/vw/vh values would have the same amount for width AND height, which makes it correctly round.
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 ...
Wow and all with CSS, this is so great, that is why i love your video's always new things to learn. Thanks for this :)
Awesome Kevin! I didn't know the :focus-within pseudo-class! Very useful!!
Thank you so much for this video, i learned some cool new tricks that now i can use in my projects😃
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 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
Focus-within is the new checkbox! Love css only designs!
I love this CSS Trick ...is great keep it up, bros
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.
that WAS awesome! my major take-away? the cubic-bezier thing. so gonna add that idea to my menu popup!
kickass effect!
Excellent video Kevin as per usual. I was wondering what has to be done to make it responsive for mobile screens. Thanks in advance.
Awesome tutorial! Big thanks!
cool trick is to give the input an initial width of 100% and higher z-index than the button so that you are always clicking the input and the cursor is automatically inside the search field when it expands.
Then adding the calculated width ( calc(100% - var(--size)) ) inside the focus-within for the correct display when it expands. So the user clicks and can start typing their query.
'Really enjoy your videos.
Not only a Fontawesome video, I'd like to see you cover using external resources in general. JQ libraries (&plugins), Fontawesome, Google Fonts ... etc.
That was wonderful. I had no idea there was a focus-within pseudo class.
Thanks for the value man !!!
🤠
one word... AWESOME!
Very nice and helpful.
Keep it up !
This is so nice, thanks Kevin. :D
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!!
I think that I don't hit the like button except for you Kiv.!! 😄
Amazing Video as usual. 👌
Man, you are truly the best.
this was VERY helpful!
Thanks Kevin! I'd love to see your fontawesome video :D
Great tutorial as always Kevin. Don't worry about errors that may happen, anyway you're human even if you're a CSS master.
Thanks Marcello :D
Great Video on a nice approach
A video about fontawesome would be great!
Thanks for detailed explanation, just ran in to a problem
Could you use a calc to have the duration be multiplied by the current width of the element?
i really love this channel
Awesome video Kevin
u r the best and the legend for fronted developer ,, ❤ u
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)?
Great tutorial!
26:25 The button icon has been cropped at the left edge the whole time during this video, and maybe a little bit at the top too. (It was driving my pixel-perfect brain crazy!) But at the end of the video, it's not cropped anymore. What's up with that?
Other than that - I thoroughly enjoyed this. Keep up the good work!
I almost feel like it's my recording because that feels like something I would have noticed, and so odd that it doesn't do it at the end like you said. I honestly have no idea 🤔
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?
Can transition duration use calc? Wouldn't take much to make the expand rate adjust to size. (I'd want it to under-adjust so twice the width takes less than twice the duration, but still noticeably longer.)
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.
Couldn't you use for the input width: calc(100% - var(--size)); only instead of the opacity and cursor things?
what we do if we want expand search bar from right to left ?
Yeah, a font awesome video would be... awesome!
Hello Kevin) I finished your course "The responsive web-design", download the arhive of "A marketing agency website" (from the last video "The loose ends
") and the index.html is not working in google chrome((( Can you fix it please?) Update: MY mistake))) Forget url(../img/hero-bg.jpg); i write (img/hero-bg.jpg);
how to create a search box that can search photo from local host with out linking the photos in the html. please help me .
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?
Hi Mr Powell . I just want to ask you something regarding HTML and CSS. I have spent the last two years learning then and I think that I am spending TOO much time on them. I know how to make a static site that is responsive and I know some Jquery I use for menu toggle. I want to more forward onto JS but I am CZcams and I see a video and it has something I don't know and I dwell on the CSS learning every Detail and I know one cannot learn any language 100%. I've also learnt Sass and bootstrap I'll see later after I complete JS. What would your suggestion be to move forward from this complex circle I put myself into. It could be lack of confidence or me being a perfectionist . Your feedback would help greatly. Regards!
I wonder if you can use calc to set the animation time so it would always grow or shrink at the same speed?
Cool idea! You wound't be able to do it with calc though, since you can't remove units and it would involve things other than 's' or 'ms'.
Maybe it's possible with Sass, but the problem is you can't use 'vw' in Sass, as you'd be stripping the unit away before it's compiled, so it becomes useless. I think you'd have to use some JS to inject the right size in.
why "margin-left:auto" could make the sumbit btn go right? i am a little bit confused..
u r a great person
Thank you
For the point at the end with the animation varying with the width of the element. If you wanted to keep full width couldn't you use a variable for the animation time that was tied into the width somehow? calc()? Not sure because I haven't used sass before.
With JS yes, but without it, sadly no. You could use a custom property that is updated with JS to get the screen width in pixels. Otherwise, the only way we can get screen width is vw, but then it's still a constant number, as 80vw is still 80vw. The CSS won't give us the pixel value of it.
So we can use this as a replacement for onClick events can't we?
I love sass, I can't go back to vanilla css anymore!
Are there any advantages to using css variables instead of sass variables?
I have a few remarks. Search input should be of type search and not text, and it should be wrapped in the form element. And why did you left flex there when you switched to absolute positioning? Really liked the trick with transition curve, didn’t know you can do this.
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?
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?
Thanks Kevin - if you're looking for video material, I'd like to know what you think is a good computer desk, keyboard & lighting set up for coding? I'm looking to upgrade my current work space and don't want to waste money on things that don't work.
Haha, not sure if you can tell but my setup isn't the best 😂
My keyboard is like 15 years old and I'm on an Ikea desk, lol.
I do *love* my keyboard though. It's an old Dell mechanical keyboard. I'd 100% recommend mechanical keyboards when you do a lot of typing.
How to keep the search bar open if there is content inside it
Couldn't create that same search bar in codepen... my position absolute was not working
Maybe a bit late but I wanted it to have the hover effect before expanding. (I could not get it to work until I added a span section in front of the submit button
Then added some css at the very end of the .search bar..
&__glow {
position: relative;
background: transparent;
border-radius: 50%;
width: calc(var(--size) - 10px);
height: calc(var(--size) - 10px);
margin-left: auto;
&:hover, &:focus {
outline: 0;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.35);
}
}
This is advanced. Hard to keep up :D
I think I couldn't quite get the opacity trick
Yup, definitely a more advanced video of mine. As I said, it goes into pushing the limits of how things are really supposed to be used. Pause things, keep trying and keep on following along and you'll get there!
great vid!
Hi Kevin nice video , i noticed a problem with this, if you type some text into the search it shrinks back to the icon, i think if you have something typed in it should keep showing the input and all the styles made by the focus-within , is there any way to make this only usin just css? thank u!
You could use :placeholder-shown (which I should do a video on!).
It allows you to style things up only if the placeholder is shown, so in this case, you could use :not(:placeholder-shown) I think. I haven't tested it, but I think it would work!
@@KevinPowell Hello kevin thank you for your answer :], I thought about using that selector but then I found the problem of how to modify the width: 100% to the parent element, which is responsible for causing expanded animation, because according to what I understand that selector is only applicable to the input elements that in this case is contained inside the div.search element, and if you should make a video about :placeholder-shown since many things can be done, in my case , I used it to make floating labels in a pretty simple way, maybe you could have a look here instagram.com/p/B4FmzMqgb8o/
Have a good day.
How would I do this same expanding but from right to left?
@@pixelglamour yes I did :) tnx
thank you :)
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.
How to make that search bar only expandable from right to left? The opposite direction of yours.
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)
Genius!!
I'd be interested in a font awesome tutorial. I'm currently trying to get it to work with java script and document.write() . Great tutorial by the way.
Couldn't you use $variables instead of var() since you are hosting using scss?
KING 👑
29:30 Hey!!! 👋🏻
🤦🏻♂️swipe typing on my phone keeps guessing "recommending" when I'm going for "recommend" lol
It's all good, lol. Sorry if I highlighted a typo, lol. Really appreciated the feedback though :D
Why isn’t the nesting working for me
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
and the answer... not fully - we can get half way there, but to be useful we really need to work with hover and thus exit on hover-out whereas focus lingers - had a fun little go at it though :) we can already use labels to hidden checkboxes / radio sets at the top of our markup to manipulate anything afterwards, so this adds nothing to that unfortunately.
Ha! I just went back through your old videos and found the one about exactly this!
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.
Very nice tutorial, but it does not work in all browsers. In Microsoft Edge it does not work at all (it does not expand) and for Firefox it needs an adjustments to make it look good. The placeholder/input text does not line out in the centre. This can be fixed by adding a height of 58px(??) to the "search-bar:focus-within .search-bar__input ".
The window on the right side was Firefox. If you were just checking my CodePen, then yeah, it wasn't 100% the same as the finished version in the tutorial.
It won't work in IE either, but it will work in the next release of Edge.
hey, your video is as always wonderful, Thanks. can you make a video about web components..?
One day! I don't have tons of experience with them right now. I am working on a project that uses them, so if I feel comfortable enough with them I'll look at a video.
perfecto
Thank u.. for ur helpful video. ...#kevin....god bless u
Why if you were using SCSS, did you declare the variables using the standards of regular CSS? You didn't do $variablename
CSS variables are much more useful than Sass variables. You can use change them in media queries and dynamically with JS. I've almost fully converted to them.
Sass variables still have their uses, and I'm a big fan of using maps, but if you can do it natively, no reason not to. Only reason Sass has variables is because they didn't exist on CSS when it was created.
time to update that monitor kevin :P
this is soooo cool +.+
Why dont you use scss variables but use css3 variables instead?
Superb :) Ta fella
sir this doesn't work if this is on the upper top left corner of your web page. your sizes will be ruined