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

hello and welcome to my channel my name is Kevin and here at my channel we learned how to make the web and how to make it look good with weekly tips tricks and tutorials and in this week's video we're gonna be seeing how we can make this pretty cool expanding search bar it was something that I started just experimenting with it something had seen a lot of time so I sort of exploring how I could do this on my own without looking at how anybody else had done it just to see you know to push myself an experiment a little bit and I think I came up with a pretty unique solution maybe other people have been doing it this way but I'm doing it with CSS only a mess and I think it's a really user friendly and awesome way to do it it's using a focus within which is just such an underutilized pseudo class and and if you're not sure what focus within is we're gonna be exploring it in this video I think it's gonna make a lot of sense once you see how I do it and hopefully give you some ideas and other ways you can be able to use something like this we'll also be exploring a little bit with the animation cuz you can see it sort of squishes and stretches a little bit so we're gonna be looking at all of those things in this video I think that's enough talk let's jump into actually coding this up so here we are in vs code imma turn wordwrap off in a second but I just wanted to take a look at what I'm linking to so here is just the link to my Google Fonts this is they link to font awesome music I'm going to be using that for my little search icon and then I'm linking to my own CSS file and right now all we have here is a content which is giving me this white box there if we go and look at my CSS I have set up a some custom properties here that are giving me just the ability to reuse colors really really easily if you're not familiar with them I am going to be using them a little bit in this video so you can check the card that's popping up now maybe get a little bit of a rundown on how they work but it's not too complicated you'll probably be able to figure it out pretty easily when following along and it's not an essential thing for this video so you can see I don't have too much going on I have nothing related to what we're going to be working on let me turn wordwrap off for now if I'm just because I find it cleans things up a little bit but if we need to just to make sure everything is on the screen I'll toggle that back and forth so the very first thing I'm going to do here is a div class and I'm just going to call it search bar and this is going to sort of house everything that's going to be that we're working on and this is a really really important give that we are going to be using here so I have my search bar and then inside of here we are going to put our input so with my input here it's a type of text so if I hit save right away that's going to give me a little text box there so that is perfect and I just realized I'm zoomed out that was a little silly me but there we go I have my type of box that is right there so the next thing we need in here is my button so we'll do a little button like that and in here well in here we're going to use the font awesome little search icon so that is this right here the FAs font awesome solid font awesome search so I hit save and you can see that is there I don't think I've ever done a specific video on font awesome if that is something you'd like me to look at at one point leave a comment down below and let me know about that so we have the two pieces that we need but we need a little bit more work on both of them because we want to make it as accessible as possible and we won't need to fix it up a little bit too so in here I'm also going to give both of these a class so I can select them in my CSS nice and easily so in here I'm going to do a class of a search bar double underscore input I am using the BEM naming convention for this if you don't like the double underscore don't use it if you're not too sure about it I do have a video on that as well I'll put a link to that one in the description so here we have my search bar input and on here I'm going to put a class is equal to and it's even my search bar double underscore submit because it's going to submit my search another thing I guess we can turn wordwrap off here for a second just we can keep track of everything that's going on and I'll space these out just to make it a little easier to follow what is what so I have my input a search bar input and on this I'm also going to give it a place holder because we want a little bit of text in here so we'll just put it in enter your search or something like that and I'm also going to give this an area label because we don't actually have a real label on this the area label is important for accessibility purposes it you know it's better than nothing ideally you would have a label anytime you have an input but if for whatever reason we're sort of going for pretty design here instead of the pure best practice so at least putting an area label on is better than nothing I'm just gonna write in search like that and on my button here we also have no text so it's also really important on these to do something very similar so on here I'm also going to give this an area label which will be submit search I'm far from an accessibility expert so if I am making any mistakes on this or you think there could be any improvements I would love if you could comment below if there's something that really helps it I will pin it to the top to make sure that other people can see that because I they would think it is important to make these as accessible as possible but if I make any mistakes I would love some feedback on that it is something that I'm trying to get better at and it is a focus of mine right now as I'm gonna hit save you might see the formatting changes a little and actually we can see it a little better and the reason that happened is because I am running it prettier if you don't know but prettier check it out it is pretty awesome it helps just clean up your code every time you hit save so let's jump over here and you'll notice this is an S CSS file and a lot of the time I say don't worry we're not gonna be writing sass in this case I will be writing sass because it does make my life a little bit easier and I'm mostly not going to do it but every now and then I am still going to use it because I do think it's nice to introduce to things like sass if you're not aware of them or to see a little bit of it I'm going to explain anything in here that's different I'm not doing anything crazy with it I'm really keeping it just for nesting purposes and you'll see why it's one of my favorite things about sass is what I'm gonna do with it in this video so I think the very first thing I'm gonna do let's come into my search bar and so I'm gonna do a few things just quickly now we're gonna have to bounce back and forth a little bit on all of this I'm gonna give this for now a boarder and let me use one of my color variables here so color primary so if we come and look up here I've set that in my root color primary so I can just reuse that anytime I want and if I had save on that we should see a border show up awesome so that is working now another thing I want to do really easily is I want these to take up the full amount of space without too much effort so the easiest way to do that is to use a display flex so the last thing I was talking about is I'm going to be doing this nesting thing like this where I'm going to write in not search I had input and what this is doing is the ampersand replaces me writing search bar again so that'd be the same as me not nesting it and writing it dot search search bar so when I with SAS if I have this here that's the exact same thing as writing this out over here so instead of doing that I can save myself a little bit of time one of the reasons BEM in SAS just works so well together if you're a little bit confused by this the link to all of this code is in the description below it is of the code pen and in that in there if you look at the code there's a in the scss little tab there's a gear icon if you go in there you can actually switch it over and see the compiled CSS you can see what the final output is and it may make it a little bit easier but I think you'll be able to follow along regardless so on this I'm going to do a flex grow of 1 and that should make my bar expand the whole size so that's awesome I'm also into a font size on here of say 1.5 REM just so we have a bit bigger of a font because it was super duper small maybe a bit of padding to mmm I'm gonna hold off on the padding for one second actually let's add a let's just do our submit two and submit just because what I want to do let's just it will set the same font size 1.5 REM for now and see what that looks like and that didn't work because I put the class here instead of having the class on my button itself that was silly hopefully you caught that before I did so yeah that search that's a little silly so the button itself should have my search class and then did this has the font awesome class working a little too fast there I guess so there we go that is looking our right now one thing that's a bit annoying with buttons is they don't get the cursor icon that we want to let people know they can interact with it so we'll change the cursor over to pointer and I will we will be changing the size of this because I don't obviously want it to look like this when it's done and so let's first turn off the border some of the new border zero back background is zero zero is not a valid background so it actually sort of turns it off you could put like transparent here probably a little bit more proper than just putting a zero we'll give this the border radius of 50 percent because we do want it to be a nice perfect circle which of course we can't see so let's put a background on it just for a second background a pink this we can see that it is coming up as a circle there we go now for the size of it it's actually not a perfect circle right now it looks kind of like an oval and so what I'm going to do is come up to my search bar here and I'm gonna write a size of 60 pixels and this is a custom property just like I'm using here except instead of this which is a globally scoped property I can use this on absolutely any element because it's on my route whereas this is only being used inside my search bar and you might say that's strange why not just put it up there but this size is unique to my search bar and maybe I'd want to reuse a different custom property like this somewhere else and you can overwrite custom properties and stuff like that but I find that just gets complicated for nothing so I'm just locally scoping this size to the search bar I find this is a really nice use for custom properties so I have my size there and then what I can do is I can use that to create my width of our size and height bar size and I know it's exactly the size that I want when probably are going to come back and play with that a little bit and we're going to be reusing that size up here as well at one point but right now we're sort of we're on our way right it's starting to look not too bad I mean actually let's just do some padding padding of zero and then I don't know point 5m left and right just to stop the text from touching the side and so we took off a few of the defaults there I didn't take off the border here so I'm just gonna do a border of zero on that as well to get rid of that we're not seeing a focus on it right now I think if we were in Chrome we probably would be so just to play safe and normally I wouldn't do this but I'm gonna do an and focus so this is to the focus State for my search bar input on this I'm do an outline of zero and normally I'd never advocate for this because people turn this off all the time if you're turning it off there has to be something that's going to replace it and in this case it's gonna be really obvious when it has a focus we're gonna be using some other things to make the focus work or to replace this focus but don't just do this with no plan to come up with an alternative people don't like the outline that's fine you don't have to but come up with something else if you're turning it off so we sort of have the main structure in place right now we can start putting it up a little bit so my search bar itself I'm gonna put a border radius on this now one thing that's annoying with water it says I can't do 50% because it's just gonna make it this weird oval that we can't see the whole oval because my back my input here actually has a background on it which is going to cause problems so on this I am going to do a background of transparent as well so there we go we can see this really ugly oval the funny thing is if you put a really big pixel value in it's just going to give you rammed corners so I don't know what the deal with that is because anyway it's sort of with the 50% it's going to the 50% mark and it's rounding from 50% there to 50% here I just don't know why the 500 pixels doesn't work it's something I should know probably because these are the things with CSS that I do like I'm just gonna use it's not even close to 50 pixels so I'll just use that for now and I think that is looking pretty snazzy and actually it is matching my height here I think so if I were to come on to this and I were to change the height to like 40 pixels I just want to see if I'm right yeah that whole thing is changing so I do need to actually set the height on my search bar so here I'm going to give this a height of my VAR size because I want to make sure that it's that height all the time and that also means I'm going to come on to my submit here and I need to change the size of this a little bit so what I'm actually going to do is a calc so I'm gonna do it calc your if you don't know about calc calc is amazing and I'm going to do minus 10 pixels because I want the width to be 10 pixels smaller than my size and I can take this same thing here put it here this is really where I want to use it so I want the height to be 10 pixels smaller than the total height of my search bar so let's try that out there we go so that is pretty much exactly what I want except the positioning is a little bit off so we're gonna fix that in one momento but what we can do so if you're not used to calc it's really really awesome I think you get the idea right away it looks a little weird when you have a variable in there but it works super good if you're doing a subtraction make sure that you don't do minus 10 like that or it's not gonna work so just make sure there is a space there I've been stuck with that in the past and don't want you to get stuck there there's two ways we can go about fixing this so the first thing when I say this I mean the positioning of it is clearly off so on my search bar the first thing I'm gonna do is add a little bit of padding um let's just try three pixels that looks pretty good I'm really happy actually with how that lined up so I'm gonna leave it just like that and that's working really nicely with my button right there so that is perfect oh and actually I thought we'd have to do a bit more work to Center it vertically but it would appear that we don't have to so that is doing all the work we need to do to so now comes the really fun part and for one thing here I'm actually going to change this to light blue just so we can see the different pieces that we have here and to play around with them a little bit because it's gonna take a little bit of playing around with these and to get this to really work the way we need it to so the very first thing we do is we're actually going to shrink my search bar all the way down by also giving this a width of var size and that's going to shrink it down you can see where it is right there maybe we could do an RGBA on this of light blue comma 0.5 this is with sass you can not do this with regular CSS you'd have to give a full or VBA like the three values RGB but with sass you can sort of pull that off so you can see that there is my circle so the width and the height are working but all of this is overflowing out the side that we don't want so we have to do a couple of things to fix this and this is where I'm going to be pushing the limits a little bit on CSS but it makes it work super beautifully I'm really happy with how but I you know we are doing things that maybe are non-conventional to be able to pull this off so the first thing we do is on my input let's give this a position of absolute absolute because I want to pull it out of the flow because by playing out of the flow it lets my button come back into there but you can see it sort of screws things up a little bit so I'm also going to give this a top of zero and a bottom of zero and just to be safe I'm gonna give it a left of zero to just make sure it's always on the left there except whoopsie doodles I've forgot up here if I'm giving this position:absolute I need to give a position over here so we'll give this a position palsy chin so this is the parent the position needs to pair that position of relative to make sure this isn't on the page itself or in this case it was going to the content you notice I give this a top and a bottom of zero and it's still not really getting the height that you'd expect it to get welcome to Firefox where this happens because of the way inputs work if this was in Chrome it would actually be stretching the whole thing one way we can fix this is also by giving this a line height of our size this is like an old centering trick it's actually a little smidgen too big just because of of where it's you know how it's all rendering with the sizing and everything so maybe I could do a calico on this one as well vara size - was it 3 pixels it's not gonna be right on looks like it's right on ahead there as well so this is an old centering trick you can only do this if this if you you can only use this if you have a single line of text so back in the days before we had flexbox and other good ways to Center things vertically this was a one of the approaches where you could give a line height and it would Center it that one line within the total like within that size because of the way line height is calculated so it is kind of hacky it's usually not practical but with an input type text it's always just one line it's how it works you're stuck with one line so we're gonna leave it just like this I think that's working out really really nice the problem is though we can't really access our button or doing thing we're just typing in here right so that's kind of kind of annoying I'm gonna leave it like that just for a minute though just so we can add the functionality in and then we'll fix up the styling of it so let's come all the way down do-do-do-do-do right to here let me do it and focus within so again this is this is the secret sauce so this is really important this is the same as doing my search bar focus within this is this is what I've just written here and this really is the secret sauce of how all of this is going to work so if you know how focus works so I have my focus if I do a background of red if I click in here the background of the thing that's being focused on changes to red that's pretty straightforward the way focus within works is if the parent has anything inside of it which is Gaines focus we can change the style of that parent so let's just add like a box shadow I'm gonna do a really bad one let's just do 10 pixels 10 pixels solid solid 30 pixel blur and we'll do black just so we can really see it so I'm gonna click in the child but you can see the parent which is just our small little circle has got a really big drop shadow on it and if I lose focus that goes away so even though it's the child that's gaining focus it's the parent style that's changing really really cool and we can do some really cool stuff with this and for some really really cool stuff because you can nest within that right that you can look at the child but you can also look at the other elements that are in there I love I love focus within I haven't done a lot with it but it's a really cool property so the first thing we do on if I have focus within my width is going to change to a hundred percent instead of being sized so if we click the width goes back up that's cool right yeah cool so right away my width is changing now not the best thing for performance necessarily but we have a width here we have our width changing so we might as well transition that transition width over say 300 milliseconds ease in out so now if I click it grows and it shrinks back down and see where this is going now right you can see the first steps it's finally coming together took us a little while to get here but it's coming together now ah it's so much fun we're gonna play with this ease in out a little bit after two and make it a lot nicer so we have my width of a hundred percent so that's perfect but things aren't really going where they need to go so the next thing I'm gonna do and actually I can I don't need to do this within the focus within I'm gonna do this on my submit button here is I'm also going to give this a margin left of auto so underused if you need something all the way on the right side margin-left:auto you're done so now as that grows that's gonna stay on the right side because of that margin left so that's super cool so that's gonna always stay there so that's good actually also let's take this pink background off because we don't want it to have a pink background we want it to be transparent except over here we do want it to have a pink background so now what I want to do is within my focus within I want and I can't use the nesting thing here sadly I need my search bar submit to have a background which is going to use my variable of color primary and the color the text color it should change over to white just to make it a bit easier to see so when I click here you see how it switches over and then it's going to switch back and back and forth and back and forth now it's a really harsh switch so it is one maybe you'd want to do a transition I'll do like 150 milliseconds whoops we should say background 150 milliseconds and we can do our ease and out or you know it's so fast people are you're not really need to notice the animation on it it just makes it a little bit less harsh of like a switch over so we can do that so that's pretty cool that's pretty cool but obviously we have to deal with this being out here because that's a bit of a problem so let's start first of all by taking that pink background off or the blue background off of it so that's gonna be a first step no more black round black around except once again what I'm actually gonna do I don't know we might be able to leave that white background on it the default ones on there but on my search bar here one thing I'm gonna do is an overflow of hidden because I don't really want anything sticking off the sides so now it's sort of working it's sort of working not quite but sort of but on this one I'm actually going to give this a opacity of zero and that sort of works now because I can come here and when I click here it's actually putting my cursor inside there because even though the opacity is at zero when opacity is at zero it's still on the page it's not like display:none it's invisible but when I click it appears and disappears so let's come back into here now and my search our search bar input this one will become opacity we'll move up to one so when I click it reappears and when I lose focus it disappears so already we're getting pretty close to where we want this to go so I'm actually you know if we left it here this was my first when I did my test this is where I got to and I was really happy with it but this is where I think we could take the next step and sort of make it a much more pleasant experience because when I go on top it's an input so we have this cursor like the text cursor thing here right so what I want to do is actually make it look like we're not clicking inside my textbox even though we are we're clicking inside that input but I want to cheat and make it look like we're not so remember I said we're doing some weird stuff my cursor here is going to be a pointer so it looks like it's a button that I can click on so when I click there it expands out and here's a regular button now the only problem is here I don't want it to look like that anymore because it looks like it's something I can click on to make something happen so once it's expanded out we actually need to change that cursor so once the focus comes on I want my cursor cursor to become initial I just wanted to go back to what the default was and I think there we go you can see that's working now initial is not always going to go back to the default the way you expect it to but in this case it does so you can see when I click in it it's one of the big advantages with this is I don't have to click again like it's not like I'm expanding it and then I have to click again to actually enter my search because we sort of cheated and we're making it look like we're clicking on a button but we're actually entering into our text frame and I can start writing right away so that's really really cool and really really handy nice and easy so there we go we're almost there we're getting really really close I think what I'm gonna do is just add a little hover and focus State on this just to make it more obvious and so what I'm gonna do is I'm gonna come on here and I'm going to say and focus so I'm gonna put a note line of 0 in here cuz I know you don't like that glowy box that Chrome is giving but if you're going to do that just make sure I'm gonna replace it with a box box shadow of 0 0 let's give it a little bit and I'll do I don't we'll just do an RGB I guess I've I don't know and let's try that out it's not too bad and actually I'm going to do this as a focus and as a hover but let's drop this down to maybe like a 25 or something like that so we just get a nice little subtle shadow maybe a bit more I want to make it pretty obvious that we are on that there we go so it's pretty obvious when we're hovering on that or if we're gaining focus I think it's perfection so just something to highlight that we're on that it gets out of the default that we had on there so super happy with that now the last thing I'm gonna do for now because everything else is working on this there's one thing that might be a little bit annoying let's just put a background on this and actually I'm going to show you another nice little thing here I'm going to do an inspect bring up my dev tools I'm gonna find the search and I'm gonna go over to hover here actually can I make this stuff bigger there we go I'm gonna go on hover here and I'm going to choose focus within just so it stays big cuz it's annoying right now that it's getting bigger and smaller all the time so you can make that state like as it's always on so my input here background with the light blue again whoops already had background we just have to do a light blue see what's not taking up the whole space so on this we could also maybe give this a width of them into a calc you can you can see I love my calc for some stuff like that 100% - of our size and I'm missing there we go so with that now let's put our focus within back on so now you can actually see that it's taking up the whole size just so if somebody is writing here taking it a little bit closer to the edge before we start getting some side scrolling so a bit less chance of it taking up the full size so that just a nice little trick that we can use there turn my light blue background off again and we're ready to go there we go so let's fix up our animation now and actually we need to stay in our dev tools here to do this anyway so let's bring this up a little bit and go and find that ease in out here and you can do this in Chrome two different icon but it works much the same way you click on it and you start getting all these different things that show up and there's this cool thing here and actually I'm going to go with I think is it this one that I want I think it's this one that I want here so and you can you can modify these a little bit and drag them around and play with them a little bit I'm just by grabbing the handles and modifying them and seeing what happens but I want one of these ones that's gonna go too far and then come back a little bit so the ease in I didn't want this one that's like wobbles on both sides because it's gonna it would be kind of awkward I think maybe we could try it but I'm gonna go with this and try this one first when you find the one you want just copy the property you got because it uses a cubic Bezier which are impossible to write on your own let's go find where we want that right here so you can see I did a cubic Bezier and pretty much what this is if we come and look back at here is it's where the handles are so the handle here is at 18 across an 89 up and this one's at 32 this way and then it's all the way up at 1.28 so I'm gonna save that and let's go and take a look at what this looks like and see how it expands further and then comes back I'm gonna go that way it squishes it let's slow that down just so we can see it a little bit better so and then when we shrink it shrinks down and then bounces back into place so I think that's so much fun but but I was having a conversation over on Twitter where I posted this a few days ago when I took a little screen capture of it and I it was at a st. John 3d who mentioned maybe toning down this a little bit cuz I just used this default cubic Bezier that was coming in and I loved how he said it it's he says good animation should be subtle it's like good makeup it should feel right without people noticing it severe and this is sort of like how I explained box shadows to people when you're using a shadow on something the biggest mistake people do is they overdo it cuz you're learning something new you're having fun with it so you like pushing it a little bit look at this it's fancy um and I have to admit definitely guilty of that in this case where I do think I was overdoing it a little bit it's probably a bit too much so on this the easiest way to do it is we can just change this number to be a little bit smaller so I'm just going to guess and make it 15 because this is the part remember if we look at that curve that's this part that's like how far up it is so the higher up that is the bigger the number is like here you can see it's going crazy now and it's squishing like crazy whereas if we take that and if we tone it down a little bit we can start getting it to be a little bit less noticeable so it's still there it's more of like a subtle realistic motion now maybe instead of that like over the top and you can go back and forth and find the one that you like but again I like that idea of it being more like makeup instead of something and instead of changing the numbers here it's a lot easier to do it like I'm doing here and you just move ahead a little bit and see what it looks like so yeah you want the animation to be there but you don't want it to be too over-the-top so just a nice little subtle thing like that I think is gonna work a lot lot better feels more natural a little bit more noticeable or less noticeable and again you can play with the the speeds and everything but it's nice when you know it's there instead of it just being in your face that it's there the last problem that can come up if you do decide to use this is if your screen is gigantic it has to run that same animation but it has to it really fast so you might want to either if you know a set of Mac's with done something or just play around with sizing or the animation speed or whatever it is just because obviously if it's really small it's doing the same animation over a much different time or it's doing the animation over the same amount of time but to cover a different distance so it's not gonna feel like it's running as fast so you can play with the numbers a little bit on that a huge thank you to at st. John 3d for the feedback on that because I hundred percent agree if you don't follow me on Twitter already why not follow me over there I tend to be where I'm the most socially active I post things ahead of time sometimes they're little hints I'm trying to do it here on YouTube too but I find I'm more active on Twitter when it's not me posting a video so there you have it and that is it I really hope you liked it I hope you also learned a couple of things along the way and if you did please leave a comment down below to let me know what you learned in this video where there was one thing ten things maybe it was just an idea that you got on how you could use some of this stuff to make your own things that would be really really cool thank you very much for watching this is the first video of mine that you are watching or maybe you've watched a few now and you haven't yet subscribed if you enjoyed this please consider subscribing I do a video like this every single week a big massive thank you to my patrons they are the ones that help keep the lights on here their support keeps me going so very big thank you to all of my patrons over there you guys are more than generous thank you very very much once again I really hope you liked this video if you did please hit the thumbs up leave a comment down below to let me know and of course until next time don't forget to make your corner the Internet just a little bit more awesome

Channel: Kevin Powell

Views: 51,006

Rating: 4.9635143 out of 5

Keywords: Kevin Powell, tutorial, html, css, scss, sass, search bar, expanding search bar, focus-within, css focus-within, css focus

Id: DonxmmWW7Tk

Length: 32min 55sec (1975 seconds)

Published: Wed Oct 02 2019