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

In this tutorial I'll be showing you how to create a custom checkbox from scratch using HTML & CSS - No JavaScript required!

This is very easy to create and use on existing web projects or websites - this method is going to harness the power of the CSS :selected pseudo class.

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!

#html #css #webdev

[ammaransari]

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

[olgabutsik]

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

[irfandz]

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

[TomasMisura]

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

[DRUEVISUAL]

Very clear and straightforward explanation!
Thank you!

[ankitkumarjat]

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

[Frankslaboratory]

Great video and well explained, thank you

[abbyroskind]

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.

[yufangchiu]

for who can't use \2714:
you can try make your own checkmark
content: "";
position: absolute;
width: 5px;
height: 10px;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
top: 40%;
left: 3%;
transform: translate(-50%, -50%) rotateZ(40deg);

[justsaybobby]

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

[selamyigrem]

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!

[abhisheksurela]

Could you please tell me which fonts are you using?

[Andy_a]

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?

[drekforder]

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

[perfectionchizuruoke]

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

[emAyush]

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.

[riyazahamed]

Unicode is not working
Could you please help

[gedoumazoutsuki]

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😑

[Varkatel]

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