Custom Checkbox Tutorial

[@WebDevSimplified]

So I have something to admit. These checkboxes aren't 100% complete. I forgot to add a disabled state to the checkboxes. Luckily, it is an easy fix and is just another property like focused. I added the code for disabled state in the CodePen and GitHub repo linked in the description. I hope you guys don't mind too much.

[@nwaguchima2280]

of course, we don't, we appreciate your effort. Also, I added justify-content: center, and align-items: center, to the .checkbox-container label, the aligns the label and the custom boxes, because you can visually see a difference, the boxes being up a bit. Thank you so much, Kyle

[@thokankit007]

With such a good explanation by you, i was able to do that by my self.

[@vibonacci]

display: flex; justify-content: center; align-items: center; has literally changed my life

[@_.sunnyraj._]

Grid will again reverse your life

[@TOMGAMING-hy9hi]

@@_.sunnyraj._ 😂😂😂😂😂😂

[@maplestoryinchinese]

Underrated video. Who's here in 2021?

[@camerondoyle391]

Most underrated video on this channel. Life saver mate

[@kotofun]

Extremely useful tutorial! Thanks, Kyle!

[@jamesle-goff4546]

For anyone following this tutorial. If you experienced problems with responsiveness when setting the height and width of your checkbox, simply change the properties to min-height and min-width. 👍

[@dtawantawng5131]

Good fix! Flex-shrink: 0; also works (:

[@thokankit007]

Now tts how u explain this !!! Awesome

[@GammaWraith]

Great video, did some things slightly different but you helped guide me in the right direction.

[@olezhonnv3215]

We need id for every chexkbox here. If I have a datagrid with 2500 rows, and I need a checkbox in every row, to be able to select multiple rows. So I need to generate id for each checkbox in this case. That is why I put input inside label, to get rid of required id for each checkbox.

[@metaverseant4470]

Do you need to have a legend or fieldset for Checkbox?

[@LuckystrikeGFXer]

Could you maybe make a tutorial/challenge to background videos with transparent content on top? I tried do to it myself but noticed I have trouble having it responsive to other aspect ratios and different screen sizes. I like that you are giving us tips on the smaller parts of CSS where we can look for support for people which use screen readers, never considered it myself that some website do not support it.

[@WebDevSimplified]

That is a great idea! I will add that to my list of video ideas. I think this may even be my next challenge I do. Thanks for the suggestion!

[@LuckystrikeGFXer]

Would be cool and no problem, we are all here to learn!

[@ifananwar2199]

how to fix the checkbox not showing? help

[@kertas4688]

Thank You!

[@ahmedboutaraa8771]

Hhhhhh I never thought that you started like this

[@blossombabalola1234]

For some reason, clicking on the label does not check the radio box for me

[@AdityaPratapSingh-ss8wg]

same problem

[@2teso523]

You are the man!

[@muhammadjunaid3684]

Obviously. Any doubt? Hahaha

[@UzmaKhan-yo2kg]

All is right ,but my content: ' \002714'; nor "\2714' not "✓' nothing works

[@gijrijasdas5055]

How to add this checkbox and combone with js sir? Please make it a tutorial i really need your help

[@soudabeheydari3945]

and if we want to check just one checkbox how can do that?

[@Mark1-f2n]

you need to use radio instead checkbox

[@RahulThakur-jl7pm]

checkmark is visible on selection, anyone facing that issue...?

[@Volodymyr_Bulhakov]

🙋👏👏👏

[@talhasupport3670]

I think this is an easy way to do this: *, *::before, *::after { box-sizing: border-box; user-select: none; } body { width: 100%; height: 10a0vh; margin: 0; display: flex; justify-content: center; align-items: center; } .checkbox-group { margin: 1rem 0; position: relative; display: flex; align-items: center; flex-flow: row nowrap; } .checkbox-group label { font-size: 30px; cursor: pointer; margin-left: 2.5rem; } .checkbox-group label::before { content: ""; position: absolute; left: 0px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; opacity: 0.9; color: #fff; background: rgb(251, 251, 251); border: 0.1rem solid rgba(0, 0, 0, 0.9); border-radius: 0.2rem; transition: all 0.5s ease; } .checkbox-group input[type="checkbox"] { cursor: pointer; opacity: 0.1; position: absolute; } .checkbox-group input[type="checkbox"]:checked + label::before { content: "\002714"; background: orangered; font-size: 1rem; text-align: center; margin: auto 0; } /* content: '/f00c'; */ CheckBox 1 CheckBox 2 CheckBox 3

[@gulledyusefhassaan5313]

the goat

[@moizkhalid2714]

just the video frontend guys want