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.
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!
Thank you for the video! Just wondering, 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?
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);
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😑
Great video and well explained, thank you
No problem mate 😃
This video is Gold, I've been find a tutorial as such for almost 2 days...
Well this is what I have been looking for because I'll be using this a lot. Thanks a lot for that !!!
No problem :)
Thanks. I have done it, the best video for styling checkbox i had ever seen)))
Thanks for very nice, clear and straightforward explanation with all the details needed!
Very clear and straightforward explanation!
Thank you!
you are great great--------------great teacher
Great video Dom!
Great video, now checkbox is not going to be headache for me.
Thanks man 👍
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.
Great video , thank you so much. 👏🏻🙏🏻🎉
Well made. Thanks!
any idea how we can style the label border and background when the checkbox is checked?
Could you please tell me which fonts are you using?
Good Content
Cheers mate!
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!
Ig its too late to answer but you can try 'transparent' instead of white. Like: `color: transparent;` instead of `color: #fff;`
thank you sir!
Thank you for the video! Just wondering, 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?
yes
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);
Great video. can I just ask a quick question? what is difference between:
element + sibling
element ~ sibling
?
yes
Why should the input tag be placed under the label
I got really confused fr
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.
Unicode is not working
Could you please help
God, you are a god!
thanxxxxx bro
good !!!
Yeah!!
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😑
display:none
are you kidding me?
it worse solution ever
Yeah, you're right:
opacity: 0;
width: 0;
margin: 0;
What about this?
no and yes and no
valo