Design A Custom Select Box Using HTML, CSS & JavaScript

Hi, in this video, I will show you how to design a custom select box from scratch using HTML, CSS, and JavaScript.

[brandonwie]

I've searched for tens of vids but only this guy exactly gets to the point with a great explanation. Thanks for the content man.

[haribharathi]

the only guy who shows code + output side by side. This helps a lot for understanding

[denyscole]

Wow! well explained, well presented, and very instructional in a lot of CSS and JavaScript required not only to build bespoke Select element, but which can also used in the display and operation of many other elements. Great Stuff

[Antnix]

Really good video. Your voice is clear, you explain everything nicely, and just everything is perfect. It's rare to find a channel this small with such good content like this. Subscribed.

[jaa]

Thank you for the great information presented in an easy to follow format. I loved the side by side view so you could instantly see the effects of the CSS.

[billmaragos]

Here is an important addition for you all, in case you want to use this inside an actual HTML Form.

A small prologue: Radio buttons work, by clicking on them or their associated label. A label is associated to a radio button through the label's "for" attribute.

In the video above, the radio button itself (input) is hidden, and instead only the label is shown, and placed inside a 'div' element (in the video displayed as class="option"). With the JS code he uses, the drop down list closes either you click on the label or the div itself. However, here is the issue:

If you click on the label, the radio button IS selected normally, but if you click on the div only (without clicking on the label), the radio button is NOT selected. Dump the whole request upon form submission in order to debug this.
You would think that a 'cheap' way to override this would be to place the input inside the label, however that did not work for me (and I'm not sure if it can work at all).

What I did to solve this, was to add this JS line
= true;"
inside the eventListener of the optionsList.forEach function. This will search for the 'input' element from the current item (all items from the optionList will be cycled through, because of the forEach above) and make it checked, using the 'checked' attribute.
So the end result looks like this:

optionsList.forEach(o => {
o.addEventListener("click", () => {
selected.innerHTML =
= true; //line that selects the radio button when the div is clicked

});
});

GTCoding Thank you for the video! Please pin this reply so that more people will see it. I'm sure that many will want to use your example inside an actual form and this was a tricky issue that I did not comprehend in the first place myself!

[mranderson]

It was very instructive. I love the speed and all the explanations. Great job)

[Hello-eqrm]

Can't describe in words how good it was!

[markreeves]

Thanks very much GTCoding. This is a great tutorial. Keep on the great work.

[hackerprime]

Thanks so much for this. I just integrated this into my Authentication/SignUpSignIn for my web app. Much love from Jamaica.

[emailme]

Nice!! Thank you for the lesson/knowledge.

[Kawishe]

My best Web Development Channel. making us easy to understand

[isitamanaemonesia]

There are tutorials doing the same thing with 70 lines of js code, lol. Thanks man.

[kwokashley]

Thank you so much! It's very useful!

[dilpavittarsingh]

Good bro thanku ♥️

It is kind of tough to learn

[max-nubz]

Very well explained! I just need to now to to make an Event once I have selected a Item.

[muhammadkhalil]

Thank you so much. Clear and easy way tutorial....

[codingbaba]

bro you don't know what you have created great

[sivasubramanian]

Thanks, it was very good.
I need two dropdowns and only when I click a particular option in the 1st dropdown, the 2nd dropdown have to be enabled.
Could you please tell me a way to create this using only javascript(without jquery)?

[const]

Thank you for this video. Really you've helped me