Custom select menu - CSS only

// Timestamps //
00:00 - Intro
02:02 - The HTML
03:03 - Starting the CSS
05:14 - Setting up the custom button
08:05 - pointer-events none
09:30 - Fixing the size
11:11 - The custom icons
16:37 - Outro

Customizing form elements can be one of the hardest things to do with CSS, with select menus being the worst of the bunch. Instead of creating a completely new element with a pile of divs and a bunch of JS, there are ways to customize select menus though!

--

Come hang out with other dev's in my Discord Community

---

Keep up to date with everything I'm up to

---

Help support my channel

---


---

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.


---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[kenny]

Thank you!

pointer-events:none; Is a lifesaver!
In my current project, I started to write Js to make stuff at the background clickable.... :D You saved me a lot of hours!

[RANKKY]

Kevin: pointer-events: none;

Me: 🤯🤯🤯

[TomAinsworth]

I’ve struggling to get something like this together at work today, and your video is perfect to get me started! Thanks as always Kevin

[s.fofandi]

I did a similar custom select input on one of my project another thing you can do when doing something like this is have an SVG with your up and down arrows and use that as the background of the select element. then with repeat: none, position: right, and size: 100% auto, you can place it to the right. this prevents you from having multiple classes and an extra dom element for an effect like that. that being said OBVIOUSLY there are 1001 ways of doing whatever you want in CSS (that pointer-events thing was brilliant)

[ThiagoVieira]

Me: "WTF!? How I'm going to build this context tooltip? The icon is messing everything!"

Kevin: pointer-events: none;

Me: 🤯

[mrabhijitrabha]

pointer-event: none; made my day, thank you master ❤️

[mostafagh]

you saved my day and my mental health in one move, god bless you .

[mke]

On firefox this doesn't seem to behave. Setting the color for the select results in Firefox on my machine in in a nicely colored object, but the option list is still white. On Chrome it behaves like expected though.

[andriilukianenko]

I don't think I will ever be able to fully comprehend CSS, but Kevin's content makes me feel I know some tips and hacks :D

[bijayaadhikari]

Scrimba is great, not just to learn, practice every moment.

[MikeyRussell]

It's a real shame that even today css doesn't provide ways to style these elements. For security I can understand they cannot be fully customisable but the basics like colours borders arrow styles should be available to the user without needing hacks. Maybe in CSS 4 eh?

[elvingonzalez]

Please. how to change the blue background hover option??

[md.mirazuddin]

Thanks again for making such incredible video.
pointer-events: none. that was a life saver.

[Avinash.iBrand]

You saved my time by pointer events property. Thank you Kevin. Much love 💕

[yitzchaksviridyuk]

Appreciate your content so much that I don't skip a lot of the ads on your videos. 😄

[khalilmahmoodiyan]

Awesome. I was looking for this for many days

[abnerwillys]

Amazing video man. I'm a Dev jr on stack JS, and this video helps very much. Thanks and best regards from Brazil.

[arsaurabh]

This was a cool video. Learned a lot. And that border trick was pretty neat.

[chrisj.]

Quite a nice trick. But personally i would use font awesome for example for the arrow (unless you dont want to use any outside stylesheet). But this gets rid of the before and after pseudo element.

[manosmenexis]

You could use a transformX for the arrows and then add top to the ::before and bottom to the ::after. That way it would be the same number.