How to Create a Custom Checkbox with PURE CSS - HTML & CSS Tutorial (Web Design)

any idea how we can style the label border and background when the checkbox is checked?

Thanks for very nice, clear and straightforward explanation with all the details needed!

Very clear and straightforward explanation!
Thank you!

Could you please tell me which fonts are you using?

This video is Gold, I've been find a tutorial as such for almost 2 days... <3

Thanks. I have done it, the best video for styling checkbox i had ever seen)))

holy f*** the fact that you have to go and to so much stuff just to have a checkbox look the way you want blows my mind...i'd rather go on and create my own with js or if there is no js in the project(wich is unlikely) i'de rather leave the stock one. its not to diss you video, its cool. just the fact that html didn't get a solution for this is horrible..it's just an input...give us control over it😑

Why should the input tag be placed under the label
I got really confused fr

great tutorial @dcode. i have a question tho, ---- if the background of the parent element (in this case, the label) isNOT white, the white check mark stays in place without us clicking it ------- is there anyway to get around that? tnx!

Great video , thank you so much. 👏🏻🙏🏻🎉

thank you sir!

Great video. can I just ask a quick question? what is difference between:
element + sibling
element ~ sibling
?

Unicode is not working
Could you please help

As others have mentioned, the property display: none seems non-workable as this is a problem for screen readers and accessibility.

Do you need to involved JS if you want to be able to actually click on the box to get the check mark? It seems like this solution only allows you to click the label to check the box.

We cannot have a div element inside a label. It's a HTML validation error. Can use 'span' or 'a' element, instead. Neat design otherwise.

Great video Dom!

Thank you for the video! Just wondering, <label> is inline element, right? How come we can turn inline (non-block) element into a flex container? Or any Html tag can be a flex container?

Great video, now checkbox is not going to be headache for me.
Thanks man 👍

display:none
are you kidding me?
it worse solution ever

thanxxxxx bro

God, you are a god!

valo

Well made. Thanks!

Great video and well explained, thank you

Good Content

Well this is what I have been looking for because I'll be using this a lot. Thanks a lot for that !!!

good !!!