Custom dropdown/select with css and javascript

A quick walkthrough on how to create a custom dropdown with css and javascript.

source code:

follow @:

[karlkrasnowsky]

Wow, not missing anything with this. Thanks for the tutorial!

[romanext]

Amazing tutorial 😊. Really liked the part about closing the dropdown once element looses focus.

[ericechemane]

Your video is perfect. The only thing that I think needs an improvement is your thumbnail. For some viewers, they rely on thumbnails first. Clicking is the first step to watch. But overall, this is the best tutorial i've seen. It covers one of the web vitals requirements.

[TheBorninmotion]

good point on accessibility, thank you !

[Jonhyleo]

This is amazing. Thanks for this tutorial. I'll test if it works with more than one custom select field on the page.

[MobiusCoin]

This is fantastic. Fast moving but fantastic. Really makes me appreciate declarative programming though. You mean I have to change the state AND tell change the GUI to match?? lol tedious!

[floriancucu]

Amazing tutorial, I have watched at least 5 videos on How to Build Custom Select Dropdown but none of them cover the accessibility issue. Congrats. Just one question, why after expand you are not focusing on the currently selected element, and instead you are focusing on the first element? How can I achieve that based on your codepen version?

[BgTheoBs]

Hello may I ask you to do the JS part with a class not a function because I can't work it out

[sbonelodube]

Thank you for this. I am very new at this, i am struggling with the java script section. I cannot understand the way you do it.

[Brinskynl]

Great tutorial, thnx. Is het possible to make this work in a form ?, i mean can the value be a input value for a POST?

[NotTheLastOne]

not a proper dropdown: how about a click outside event ?