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

Подписаться 133 тыс.

Просмотров 67 тыс.

50% 1

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:
/ dcode - with enough funding I plan to develop a website of some sort with a new developer experience!
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!

Опубликовано:

9 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 48

@jaymonserrat5982 2 года назад

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

@b4rt009 3 года назад

I absolutely love your tutorials man!

@qcdiamond8292 4 года назад

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

@angladephil 4 года назад

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 !

@mezzanine510 3 года назад

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 3 года назад

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

@faythe03 3 года назад

A perfect tutorial, great job! :) Very elegant

@elliotgaramendi 2 года назад

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

@orhankansiz5424 4 года назад

I love this videos. short and effective

@ImArtfulLee 11 месяцев назад

Thanks a lot! It's very helpful 🥳

@work9167 2 года назад

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

@ashrafess11 2 года назад

thank you so much , just subscribed :)

@theethicalh3707 2 года назад

extremly perfect thank you very much bro

@mikeritter7629 2 года назад

Much Thanks! U saved my day

@user-zc6ly2ek8y Год назад

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

@thezodop8229 2 года назад

man thanks a lot .. you made my day

@user-zk1uw1un6l 11 месяцев назад

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

@sathyam8688 2 года назад

Thanks for the tutorial

@adamdeuxieme 3 года назад

Fabulous thanks !

@deskwavz 3 года назад

well done explanation bro.....

@user-es7km2ls1k 11 месяцев назад

Thank you!

@evelynbittelbrunn180 3 года назад

Thank you!!!

@allisonlowe9594 Год назад

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

@JesusPetit5 2 года назад

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

@stanislavshilo6022 2 года назад

all this code doesn't work in 2022

@jejakkaki2962 2 года назад

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

@shiekha2973 3 года назад

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

@arc8218 2 года назад

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

@pritech8302 2 года назад

thankyou so much sir

@nicucucos7407 3 года назад

Thanks dude!

@dcode-software 3 года назад

No problem

@prince_cyprus 3 года назад

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

@thiagoleobons390 3 года назад

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

@federicoangeles3021 2 года назад

Gracias owo

@leonardoantoniomaundokabon786 3 года назад

merci beaucoup

@carlosnucette6927 4 года назад

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

@dcode-software 4 года назад

Didn't know that, cheers!

@katarinasekutor7199 4 года назад

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

@actualarsalan 3 года назад

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 3 года назад

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 3 года назад

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

@ahmadyogi1340 3 года назад

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"