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

[@mezzanine510]

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.

[@cashmears]

If you have a complicated menu system this solution works well!

[@jaymonserrat5982]

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

[@allisonlowe9594]

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

[@HilolaFayoziddinova]

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

[@work9167]

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

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

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

[@b4rt009]

I absolutely love your tutorials man!

[@ImArtfulLee]

Thanks a lot! It's very helpful 🥳

[@thiagoleobons390]

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

[@JesusPetit5]

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

[@qcdiamond8292]

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

[@arc8218]

finally tysm i edited ur code and make it look like button instead

[@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 !

[@mikeritter7629]

Much Thanks! U saved my day

[@jejakkaki2962]

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

[@stanislavshilo6022]

all this code doesn't work in 2022

[@carlosnucette6927]

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

[@dcode-software]

Didn't know that, cheers!

[@faythe03]

A perfect tutorial, great job! :) Very elegant

[@thezodop8229]

man thanks a lot .. you made my day

[@elliotgaramendi]

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

[@theethicalh3707]

extremly perfect thank you very much bro

[@ashrafess11]

thank you so much , just subscribed :)

[@katarinasekutor7199]

mine doesnt switch to other buttons when i click them. it only works on the first one. does anyone know how to help?

[@actualarsalan]

I know it has been 4 months since you posted this comment, but have you figured it out yet? Or is it still an issue?

[@dcode-software]

Hey have you tried making sure the attributes are the exact same as they are in the video? Make sure you've got every character right

[@treyp9935]

I'm having same issue here all the characters are exactly the same no difference

[@ahmadyogi1340]

Make sure when you create a new label tag, use a different for name, let's say in this tutorial he's using "myRadioId", so I change the other radio button for to " myRadioId2"

[@ualikhanyertayev7836]

@@ahmadyogi1340 bro thanks that helped

[@shiekha2973]

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

[@orhankansiz5424]

I love this videos. short and effective

[@sathyam8688]

Thanks for the tutorial

[@deskwavz]

well done explanation bro.....

[@Vladimir-z8m1w]

Thank you!

[@prince_cyprus]

isnt a div not allowed to be a child element of label?

[@pritech8302]

thankyou so much sir

[@nicucucos7407]

Thanks dude!

[@dcode-software]

No problem

[@adamdeuxieme]

Fabulous thanks !

[@evelynbittelbrunn180]

Thank you!!!

[@federicoangeles3021]

Gracias owo

[@leonardoantoniomaundokabon786]

merci beaucoup

[@javiervaez8587]

maquina

[@g.t.a3739]

buy please a noisy keyboard!