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.
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
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. 👍
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.
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.
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.
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
With such a good explanation by you, i was able to do that by my self.
display: flex; justify-content: center; align-items: center; has literally changed my life
Grid will again reverse your life
@@_.sunnyraj._ 😂😂😂😂😂😂
Underrated video. Who's here in 2021?
Most underrated video on this channel. Life saver mate
Great video, did some things slightly different but you helped guide me in the right direction.
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. 👍
Good fix! Flex-shrink: 0; also works (:
Extremely useful tutorial! Thanks, Kyle!
Exactly what I was looking for. Thanks.
Now tts how u explain this !!! Awesome
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.
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.
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!
Would be cool and no problem, we are all here to learn!
Do you need to have a legend or fieldset for Checkbox?
Thank You!
Hhhhhh I never thought that you started like this
All is right ,but my content: ' \002714'; nor "\2714' not "✓' nothing works
how to fix the checkbox not showing? help
You are the man!
Obviously. Any doubt?
Hahaha
For some reason, clicking on the label does not check the radio box for me
same problem
How to add this checkbox and combone with js sir? Please make it a tutorial i really need your help
the goat
and if we want to check just one checkbox how can do that?
you need to use radio instead checkbox
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
checkmark is visible on selection, anyone facing that issue...?
🙋👏👏👏
just the video frontend guys want