Custom Checkbox Tutorial

In this video we will walk-through how to create a custom checkbox using pure CSS that is entirely responsive and accessible. I will go over my planning and thought process for creating this checkbox as well as explain why I use each CSS style. By the end of this video you will have a basic understanding of how CSS checkbox selectors work as well as how to support screen reader accessibility.

If you have any suggestions for CSS tutorials I should tackle please let me know in the comments below.

Code For This Tutorial:

Code Pen For This Tutorial:

Twitter:

GitHub:

Code Pen:

#CSSTutorial #WebDevelopment #Programming

[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.

[vibonacci]

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

[maplestoryinchinese]

Underrated video. Who's here in 2021?

[camerondoyle]

Most underrated video on this channel. Life saver mate

[kotofun]

Extremely useful tutorial! Thanks, Kyle!

[GammaWraith]

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

[jamesle-goff]

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. 👍

[thokankit]

Now tts how u explain this !!! Awesome

[olezhonnv]

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.

[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.

[ahmedboutaraa]

I never thought that you started like this

[metaverseant]

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

[blossombabalola]

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

[ifananwar]

how to fix the checkbox not showing? help

[soudabeheydari]

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

[gijrijasdas]

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

[talhasupport]

I think this is an easy way to do this:

<style>
*,
*::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 + label::before {
content: "\002714";
background: orangered;
font-size: 1rem;
text-align: center;
margin: auto 0;
}

/* content: '/f00c'; */
</style>


<div class="checkbox-conteiner">
<div class="checkbox-group">
<input type="checkbox" name="c1" id="c1" />
<label for="c1">CheckBox 1</label>
</div>
<div class="checkbox-group">
<input type="checkbox" name="c1" id="c2" />
<label for="c2">CheckBox 2</label>
</div>
<div class="checkbox-group">
<input type="checkbox" name="c1" id="c3" />
<label for="c3">CheckBox 3</label>
</div>
</div>

[UzmaKhan-yokg]

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

[RahulThakur-jlpm]

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