How to Create a Custom Radio Button - HTML & CSS Tutorial

In this video tutorial I'll be showing you how to create a custom radio button using pure HTML & CSS - No JavaScript required!

This is super easy to do and only takes around 40 lines of CSS.

Support me on Patreon:

Follow me on Twitter @dcodeyt!

If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!

[mezzanine]

This was excellent, thanks! For accesibility, I would recommend a modification: change ".radio__input" by removing the "display: none" CSS and adding "position: absolute; opacity: 0". This way, you can still select the element with the keyboard, but it's invisible and doesn't interfere with the spacing of other elements around it.

[allisonlowe]

Thank you for this tutorial! Quick question, how do we make it so that the button is able to be deselected?

[jaymonserrat]

This was an outstanding, quick, and very informative tutorial. Thank you!

[HilolaFayoziddinova]

thank u very much this is actually what i need for my exam.

[JesusPetit]

thanks! i didn't know how to align the buttons to the left

[stanislavshilo]

all this code doesn't work in 2022

[arc]

finally tysm

i edited ur code and make it look like button instead

[Катерина-ял]

Thank you for a valuable lesson! You hepled me to solve my problem

[thiagoleobons]

2:50 you don't need the for attribute if you're wrapping the input field with the label element

[work]

This is great and smart, man! I'm happy you didn't use any JS for this

[ImArtfulLee]

Thanks a lot! It's very helpful 🥳

[angladephil]

Thank you !!! I will certainly integrate this HTML and CSS in your "beautiful forms" tuto/template for radio buttons.
I like your work very much !

[carlosnucette]

Great, but when you put the input inside the label, it is not necessary to set the for attribute. Thanks.

[qcdiamond]

Wow. Double thanks. Just watch your other tutorial and it was very good. This one is just as good. Love them!

[jejakkaki]

what font and theme do you use sir? i realy love it

[faythe]

A perfect tutorial, great job! :) Very elegant

[theethicalh]

extremly perfect thank you very much bro

[shiekha]

Great but I have a question why when I'm making a selection it doesn't show anything of my selection

[elliotgaramendi]

Hermano! Muchas gracias, es el mejor video! Explicado a detalle y sobre todo con el código más limpio! Muchas gracias!

[ashrafess]

thank you so much, just subscribed :)