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!
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);
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?
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😑
This video is Gold, I've been find a tutorial as such for almost 2 days...
Thanks. I have done it, the best video for styling checkbox i had ever seen)))
Well this is what I have been looking for because I'll be using this a lot. Thanks a lot for that !!!
No problem :)
Great video and well explained, thank you
No problem mate 😃
Thanks for very nice, clear and straightforward explanation with all the details needed!
Very clear and straightforward explanation!
Thank you!
Great video, now checkbox is not going to be headache for me.
Thanks man 👍
you are great great--------------great teacher
Great video Dom!
any idea how we can style the label border and background when the checkbox is checked?
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.
Could you please tell me which fonts are you using?
Well made. Thanks!
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;`
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);
Why should the input tag be placed under the label
I got really confused fr
thank you sir!
Good Content
Cheers mate!
Great video. can I just ask a quick question? what is difference between:
element + sibling
element ~ sibling
?
yes
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
Unicode is not working
Could you please help
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.
thanxxxxx bro
God, you are a god!
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😑
valo
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