Custom select menu - CSS only

Key Takeaways

in this video we're going to be looking at how we can make a custom drop-down we're gonna be looking at a very interesting property which is pointer events and how we setting it to none is what makes all of this possible and we're also gonna be looking at pseudo elements and a little bit of custom properties and a cool little border triangle trick and some other stuff it's a lot of fun it makes your select menus look so awesome without having to make a completely custom select menu which can be so much work and it really does give it a customized and much nicer look hi there and welcome to this video I'm so excited for you to be here if you're new 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 as I said in this one we're gonna be looking at custom select menus but before we get to that I just want to let you know that this video is being brought to you by scrim BA they've introduced a subscription-based model now so instead of having to purchase every course individually you can now subscribe you can get access to their entire range of extremely high quality courses they have full 10 plus hour courses on things like view react JavaScript UI and of course my own course the responsive web design bootcamp so with this one subscription you would be getting access to all of those while you're getting access to their library and any new courses that do come out you're also getting access to their curated list because there's a lot of courses that each one is 10 to 15 hours long it can be hard to know which one you should be doing and where you should be going so they've also introduced the Learning Path which curates all of this content and puts it into an order for you to watch to get you job ready and even at the end of it they have a full module on being job ready and finding your first job if you don't know about scrim but it's a really awesome interactive platform where you can literally pause the video and code along inside of it it's really cool how that works you hit then you hit play and it just resumes off where the instructor was you can fork off the cast's work on it you can download the code and work on it locally on your computer there's a whole bunch of different ways you can go it's a really cool platform I really strongly suggest you check it out so the link for that is down in the description below and a big THANK YOU to scrim before bringing this video to you we're looking at creating a custom select menu and so let's jump right into it I do want to show here I do have two browsers open the one on the top is Firefox the one on the bottom is Chrome just because they render select fields very differently from one another and it can be another reason why it would be nice to give yourself a little custom drop-down menu or drop-down button instead of using the defaults and if we come and look at my markup I have done I have my custom select here which is the parent for everything and inside the custom select I have my regular select menu like you would normally do and I have here a span now I'm not a real big fan of having empty markup for design elements there is a way that you could actually do this all using just the parent here and using before and after suit element just on this but in this case I do want to look because I'm going to do a little bit extra and we're gonna see I'm gonna use two sewer elements on this one so for that but if you only wanted one pseudo element on the whole thing to keep just a down arrow you could actually get this all done without this span here that can be a little challenge to yourself to see if you can figure that one out but let's jump into here you can see I haven't really done much I've just given it a box shadow so far so the very first thing I'm going to do is come in and let's give this a font size to make it a little bit bigger just because it's a bit small and for demo purposes I think it's gonna be nice if it's a bit bigger and we should give it some padding and the default select menus are very hard to style but one thing we can do to make them look better is to give them some padding so I'm gonna go with one M on the left and right and 1.5 on the top and bottom so it's gonna just get a little bit bigger it like that and now you can see I have my drop down there and you can see here now already you can see there is a difference between Chrome and Firefox Firefox when you hover on top the button gets highlighted a bit and these are more space so whereas here they're much tighter in chrome and the button doesn't highlight and the arrow even looks a little bit different in the - to begin with I've also chosen a color ahead of time which is this which is a dark blue and then I'll just give the a regular color of white for the text so we can still see it when you give these to your select menu you can see that I have my drop-down is working all those colors have inherited through to the options and everything is looking good except you'll notice that that background color doesn't come on to this button here and that's gonna awkward right it's kind of weird that that doesn't happen whereas here it does come through one thing that you'll see a lot as you can do an appearance none which is not gonna make it look like a button anymore which is it still is a drop-down but it gets rid of the the drop-down thing that was sort of coming by default it is something you can do on lots of form elements to get rid of their default styling but in this case we're not gonna need it so I'm not gonna do it but I thought I would show it to you and you do see that in a lot of tutorials and stuff online as well but we're gonna be just hiding this away now one thing I'm I'm gonna add here is a border of zero it's not gonna change the chrome one but there is a small border in the Firefox one so when I hit save there you should see that border disappears there is a small border on this button but again we're going to be covering that button up anyway so not a big deal now for the for our custom button so for that I'm gonna do my custom arrow and we need to make it appear so for now I'm gonna use like a color just so we can see it really well and that will use red so we'll set a background of red on this and it's not really even gonna show up at first because I do want to do a display of block the default for a span is in line so in this case I want to switch it over to block if ever you're not sure about inline block or inline block and what's the difference and when you should use which one I do have a video so there should be a card popping up on that right now that dives into the three of them and the differences between those so we still don't see it though because there's no content in it so I am going to come in and let's just give it a height of one rim for now and a width of one Ram for now and we should see it appear now it's appearing all the way down here hmm why is it all the way down there let's go and take a look and it is coming after my select menu it's just in the regular flow right now so we don't want it to do that we want to pull it out of the regular flow and we want to position it on top of where this button is to be able to do that we want to come in and give it a position absolutely the only problem with this is when I first hit save nothing's really gonna change but it was pulled out of the flow but if I want to position this now I can say well I want it to be in the top right so I can say top zero and I want to say right zero except when I hit save it's not going to move to here it's gonna move all the way up to here and I we don't need to see two of these let's just hide that away for now and hit save and you can see it's popped up to the top corner there and that's just the way position:absolute works by default it's going on the viewport unless we tell it something else to look at so in this case the other thing and it has to be a parent or a grandparent so it can't be a sibling so that's why I can't use my select menu here but I do have my custom select which is the parent of my custom arrow we come back to here I have my custom select and inside of their way of my custom arrow so by saying custom select and giving this a position and I'm gonna give it position:relative just so nothing actually changes on it but now the red box or my custom arrow there is being positioned exactly where I want it to be now the other advantage with having this set up is for the height we can just come in and say 100 percent and it will match the height of its parent but obviously the width needs a bit of fixing here I think we're gonna go pretty big we'll go with like 4 because I do want it to be a nice almost square button if you want it to be a perfect square you might have to play around with your values a little bit I'm not worried about being a perfect square but I do want it to be a lot bigger let's just turn this whole thing off for a second I do want it to be a lot bigger than this little thin thing that's showing up here so we are gonna go with I think a 4r M is perfect on that and I could do for M it should look exactly the same so that's looking good the only thing is my overall so now if I click here it's working but this is where see if I click here I can pull that down but if I click on top of this red thing it's not activating my select menu and that's kind of weird cuz people are gonna you know we like having that arrow there because it's a visual clue for people that they can click on it if I just saw a box like this I wouldn't think I can click on it I would just think it says lorem and I wouldn't know why and obviously it wouldn't say Laura I'm in the real world but I wouldn't know that it's clickable until I have something here but let's say we had our arrow in here and then I tried clicking on it and it doesn't work that's a fail right so we want to make this a clickable or we don't want this to be clickable but we want what is underneath it to be clickable and because it's because this red box is sitting on top of the other one it's blocking I'm clicking and the browser's recognizing the click on the red it's not recognizing and saying I'm clicking on this red thing it's not paying attention to what's behind it so this is where the whole point of this video I guess is to be pointer events none and that means anything that we use a pointer event and what's a pointer it's your mouse it's your finger it's whatever's interacting with the page it will no longer register anything with it it's as if it's there visually but as far as the browser is concerned I can't click on it it's just a visual element now so now if I click you can see it actually still activates and deactivates my select menu which is great now I want a bit nicer of a color in there so rinse which that out for this one which I'd already had saved so it looks a little bit nicer and I do think the spacing is a little bit weird now too especially if I go with a long one you can see like there's a period there that's actually being hitting because it's going underneath my button which is really really awkward so my button has a width of 4 M on it so what I would want to do here is with my padding I have one point one on the top and bottom one point five on this side but I think what I'm gonna do so one M and then I'm gonna go pretty big like a 6 M here and I did that wrong one point five on that side and a six over on this side not sixteen ha there we go maybe that's a little big five so what that's doing is it's making sure I've padding all the way around and I think just as like a visual look it looks a little bit nicer when it's stretched out like that anyway and now if you had a long one it would fit the entire thing but it would never go underneath my button because actually let's pull up our dev tools here and just take a look you can see the padding of it stopping it here and maybe we could even drop that to a four so now you can see it's like equal spacing all the way around because the padding is starting here and the padding is going all the way up to here so it's giving us that nice area here where my text will live it will never go underneath my button which is really really important for that time you know if you can go underneath your button you have a problem and it's one of the things you do want to be careful with if you're building out something custom like this because by default the browser it's not going to cause any issues but we can introduce issues when we're doing stuff like that or like this and now the last thing I want to do is it still doesn't look clickable so now we do have to bring in those arrows that we want so for that I'm gonna go to my custom arrow here and I want as I said to pseudo elements custom arrow after so since we need to I'm just putting any styles that are the same on all of them absolute I'm gonna be using the border trick here so I'm gonna give them a width and a height of 0 and if you don't know the border trick it's pretty simple but it does involve three three borders to be able to do this and I do have a video dedicated to how this works so if you don't know about it you see me do it you're really confused I go into detail in the video so that it should be popping up now about how this actually works and why it makes a triangle because I remember the first time I saw it I'm like I don't get why that's making a triangle and I was very confused but it makes a lot of sense once you understand how it works so for this to work you do need three borders so I'm gonna go with a border left a border right and a border we want to top for this one and we'll use the bottom for the after so I'm gonna do one M you want to be solid but we want these two to be transparent the top and actually we're gonna use the same thing for both so the left and the right are going to be one M solid and transparent and my top one is going to be the same size gonna be solid but it's gonna have a color let's just it red for now and you can see it's made a triangle pointing down so that's pretty cool and if you switch this to bottom it's gonna be the other way around where it's gonna point out and again if you're confused a little bit by that I do recommend you check out that video so we'll leave that one point actually maybe this one should be bottom it would make more sense that the before oh we have a before and an after so my before I can point up my after can point down so basically I want to take this same thing now my buttons a little bit big actually and I'm repeating myself here a bunch of times so what I think I'm also gonna do is come and use a custom property here if you don't know about custom properties they're amazing they're like CSS variables so I'm just going to put size and we'll do a 1m for now and I think this value will change but that just means here here and here I can do bar size and it's gonna use that number for all of them so if I come here and I change this to 0.5 it's going to change like now all of these are 0.5 super-amazing use custom properties they're great and so let's go back up to 1 because 0.5 is a bit small ones a bit big but we'll sort it out once we have my after as well so actually I'm gonna take this I'm going to do a shift alt and push it down and it's going to duplicate the whole thing you're on a Mac I think there's an option in there instead of an alt and I can change that to an after and I can just change so if I do let's do that and then just change this to order top and that should give me my two arrows obviously I don't want them to be red and I could come up with a custom property for this too I guess but let's I'm not gonna bother it's only in two spots but rgba and the easiest thing 255 255 255 and like 0.5 you can see the two hours now and because they are a little bit transparent you can see that they're overlapping a bit and now it's just about getting them to the right spot so where do I want them I want them both to have a left of 50% so that will move the leftmost point right to the middle and then I'm gonna do a trans form translate and the translate might be different for both actually I'm gonna have to actually yeah the translate is gonna be a little bit different no it doesn't have to be okay left is fine um I'm just trying to think we'll do the same for top that top is 50% yeah we're gonna play with that number a little bit but then my translate is gonna be a negative 50 negative 50 I always forget if one there we go so that should be dead center but now I want to move one of them up in one of them down a little bit so I think what I'm gonna do is take the top off and just change them up here so my top on this one could be would it be 30 would that move that one up and I think I mucked this whole thing up but then I can do a top say 60% oh it did work hi look at that perfect and they should be more or less right in the middle I think maybe a 40 and a 60 would make more sense oh they're gonna overlap then so say I did 40 35 and 65 ah there we go and it's starting to look pretty good except I do find them really really big so now it's just where we can come here and point five was really small so straight point six five and of course now I change the size the too far apart so maybe a thirty and forty and sixty is working perfectly now and they look dead centered and now we get a nice little drop down just like that and let's check it out and see what it looks like in Chrome and we can see here in chrome it's looking pretty much the same now obviously this part does look a little bit different but that is the nature of using different browsers and it is a bit of a nature of Selectmen use being really hard to style but that is it I hope you enjoyed the video I hope you learned a couple things along the way so again if you want to know more about that border trick it's one of those things that even in the comments of the video a lot of people said like shouldn't you be using clip path it's so much easier yes a hundred percent clip path a lot of the time is the better option but sometimes things like this are the better option it's not often but this is one of those use cases where I do think it is a cool idea so yeah I really hope that you enjoyed this video whatever you do do make sure you check out the scrimp uh career path as I said at the beginning my course you have full access to my full 15 hour course the responsive web design boot camp if you join up for that as well as their entire learning path and a whole bunch of other courses as well there's a lot of very high quality content from many very high quality instructors so do make sure that you check it out thank you very much for watching if you enjoyed this video and you haven't yet subscribed please do consider subscribing big thank you to my patrons for helping make all of this possible with their monetary contributions you guys are absolutely amazing and I can't thank you enough for your support and of course until next time don't forget to make your quarter the Internet just a little bit more awesome