Tags that don't close ( in this case) can't have pseudoelements. Although this might work in modern browsers, this is not a valid way to do it and won't work properly in IE11 for example. You gotta use ::before and ::after of the parent div (or label) instead.
@@MrHouloul Ok I'll try. The markup in this tutorial is ...
... what I suggest doing instead is: ...
... Then you can hide actual input like this: .hidden-input-part:not(:focus):not(:active) { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; border: 0; clip: rect(0 0 0 0); } and change selectors from this video like this: input[type="checkbox"] ---> .hidden-input-part + .visible-input-part input:checked [type="checkbox"]---> .hidden-input-part:checked + .visible-input-part input[type="checkbox"]::before ---> .hidden-input-part + .visible-input-part::before input:checked[type="checkbox"]::before ---> .hidden-input-part:checked + .visible-input-part::before There are like 5 more way to do this correctly that I know about, this one is just my go-to method.
Just tried it today and managed to make it work. Line 46 (left:40px) on the "checked::before" didn't work for me with SMOOTH animation/transition = had to use TRANSLATE(100%). When I've left it like you have, for some reason the transition didn't "kick in" and the change of the button position was instant, rather then smooth/animated. BUT ... still - awesome job on this one. With such "styled checkbox" and SIBLING COMBINATOR I've managed to do a nice option between MONTHLY/YEARLY pricing tables ...
Melhor vídeo sobre o assunto não pode existir xD. Muito simples de se fazer, as pausas no codigo para mostrar como está ficando são muito boas para o aprendizado. Parabéns pelo trabalho!!!
however if you create more than one button it generates a bug the little ball of the second or third button goes to the place where the first switch is, it only works if it is with only 1 button
You should add comments to your code so viewers can get an idea of what you're doing. For example, the center class is only for your tutorial and is not needed in a real project. Unless the checkbox needs to be in the center of the screen. Other than that, I get a ton of ideas from you. Keep it up.
you should use :: for pseudo elements instead of using : because that's for pseudo classes pls I know just a single one works to make sure its backwards compatible but it's not the default for css3
I couldn't able to change width and Height with differente pixels.... Means it took only same value for the dimensions... Like square.... Please help me to fix this...
Doesn't quite work for me. the `::before` elements slides, alright, but there's also a circle left behind where it used to be in the unchecked state but half-hidden behind the checkbox background.
dear sir Mujhe apni youtube play list ko apne php/html page per list karna or wo play kar per popup ho automatically update ho uvaaworld.com/gallery_backup.php ye website ka link hai kuch is traha se plz code ya video ka link send kijiye
THANK YOU!!! for breaking this down step by step. Didn't realize Wordpress was overriding my styling until I saw this video. Very GRATEFUL!!!
Thank you very much this help me lot
Tags that don't close ( in this case) can't have pseudoelements. Although this might work in modern browsers, this is not a valid way to do it and won't work properly in IE11 for example. You gotta use ::before and ::after of the parent div (or label) instead.
this should get more likes, because its true
can you write it I dont understand
@@MrHouloul Ok I'll try.
The markup in this tutorial is
...
...
what I suggest doing instead is:
...
...
Then you can hide actual input like this:
.hidden-input-part:not(:focus):not(:active) {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
border: 0;
clip: rect(0 0 0 0);
}
and change selectors from this video like this:
input[type="checkbox"] ---> .hidden-input-part + .visible-input-part
input:checked [type="checkbox"]---> .hidden-input-part:checked + .visible-input-part
input[type="checkbox"]::before ---> .hidden-input-part + .visible-input-part::before
input:checked[type="checkbox"]::before ---> .hidden-input-part:checked + .visible-input-part::before
There are like 5 more way to do this correctly that I know about, this one is just my go-to method.
Just tried it today and managed to make it work. Line 46 (left:40px) on the "checked::before" didn't work for me with SMOOTH animation/transition = had to use TRANSLATE(100%). When I've left it like you have, for some reason the transition didn't "kick in" and the change of the button position was instant, rather then smooth/animated.
BUT ... still - awesome job on this one. With such "styled checkbox" and SIBLING COMBINATOR I've managed to do a nice option between MONTHLY/YEARLY pricing tables ...
i wanna steal your skills
Simple and to the point, thank you for uploading.
Wow, you are the man, this is an incredible use of inputs. Thank you for sharing.
Thanks a lot. This tutorial was so helpful for a project.
Win + Tab. Nice...
Thank you! You're the best css player hehe
this is cool and beautiful
Melhor vídeo sobre o assunto não pode existir xD. Muito simples de se fazer, as pausas no codigo para mostrar como está ficando são muito boas para o aprendizado. Parabéns pelo trabalho!!!
I learnt a lot from you👍.
however if you create more than one button it generates a bug the little ball of the second or third button goes to the place where the first switch is, it only works if it is with only 1 button
Thank you bro. You are amazing
You should add comments to your code so viewers can get an idea of what you're doing. For example, the center class is only for your tutorial and is not needed in a real project. Unless the checkbox needs to be in the center of the screen. Other than that, I get a ton of ideas from you. Keep it up.
btw, it's obvious
Thanks man. Good tutorial but also add comments in code for beginners
Thank you very much you are perfect
Very nice 👌
thank you bhai
i really love it......
Great
this is the easy way to do it
thank you..
Thanks
your video
It helped me a lot
a perfect video. thank you very much! ♥️
that's fantastic keep going!! if u add ur voice it would be better
Nice, thanks
thank you so much
Nice
You're the BEST
good.thx
This is so perfect. Thanksssss
thanks legend!
Perfect . Thank you
How to do this with input{ all: unset;} in reset stylesheet???
great
ty
Absolutely appreciated
Wow thank you so much, its so nice and easy to code. Really awesome!
Gracias
Muchas Gracias, Excelente ejemplo
What if I applied a delay to the input to turn blue only when the white circle touched the other end? 🤔
Amazing
You save me again thx bro
What should do if you have multiple checkboxes but you only want one to be like this? i.e. how do you make a checkbox unique?
You have created the videos is very best or superb but I request that enter voice in your video and explain case property SVG
+Vijay Gohil ok
THANK U
Thaaanks
thank you very much, such a great help
So many thanks for sharing it.
you should use :: for pseudo elements instead of using : because that's for pseudo classes pls I know just a single one works to make sure its backwards compatible but it's not the default for css3
thanksssss aaa trillion
Awesome Man
Awesome bro
I couldn't able to change width and Height with differente pixels.... Means it took only same value for the dimensions... Like square.... Please help me to fix this...
i prefer this song
Me sirvio su video gracias
*_good_*
How to add dragging and snapping functionality along with click with js and css only?
my button which is scaled gets small when its checked and when cheked it scales(1.1)! solution?
NICE!!!!!!!!!!!!!!!!!!!!!! LIKE!!!!!!!!!!!!!!!!!!!!!!
fx
thaks for this
NADEEMJOHN
God stuff, but, in input[type='checkbox'] css declaration, must be added -moz-apearance:none; for firefox compatibility
Bob Suk yeah and a display:none on the checkbox element would be way better
@@postamble TRUE
Salute!
amazinggggggggggg
Yeah... this is more like it! It is good enough that it would probably make a JS Guru noticed your Kung Fu?
Doesn't quite work for me. the `::before` elements slides, alright, but there's also a circle left behind where it used to be in the unchecked state but half-hidden behind the checkbox background.
im not sure that it will work, but try "z-index: 1;"
Thank you :)
Great job!!!
i don't know how make circle in center. in Microsoft Edge not work (
Thanks. By the way, I like classical music, but that was tooooooooooooooo schmaltzy.
Hey please add the codes on descriptions .
How to style a radio button??
*Cool*
it doesn't work in other browsers. it only works in chrome. can you help me?
If I put this code in my CSS will it not affect every checkbox on my website?
Si
Send us , movie , you create app APK responsive scroll menu . Congratulations to you big developer congratulations to you
thaaaaanks !
Make a game using python or java
i've tried everything and i just get a square check-box and not wat you have, plz help
Make sure your code is absolutely the same - every character, every space. If it doesn't work then post your code here in a reply.
HTML:
Style Checkbox with CSS
CSS:
body{
margin: 0;
padding: 0;
background: #f3f3f3;}
.center{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);}
}
input[type="checkbox"]
{
position: relative;
width: 80px;
height: 40px;
-webkit-appearance: none;
background: #c6c6c6;
outline: none;
border-radius: 20px;
box-shadow: inset 0 0 5px rgba(255, 0, 0, 0.2);
/*transition: .5s;*/
}
input:checked[type="checkbox"]
{
background: #03a9f4;
}
input[type="checkbox"]:before
{
content: '';
position: absolute;
width: 40px;
height: 40px;
border-radius: 20px;
top: 0;
left: 0;
background: #0400ff;
transform: scale(1.1);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
transition: .5s;
}
input:checked[type="checkbox"]:before
{
left:40px;
}
Muito bom, parabéns \o/
Hey I'II can to replay your code in my language on my channel?
Красавчик
input[type="checkbox'] is not working for firefox
no me funciona
lo copie tal cual lo vi en us video y no me hace las transiciones correctamente. no tube ningun error al copiarlo. que esta pasando?
instead of music u can explain the code too
dear sir
Mujhe apni youtube play list ko apne php/html page per list karna or wo play kar per popup ho automatically update ho
uvaaworld.com/gallery_backup.php ye website ka link hai kuch is traha se plz code ya video ka link send kijiye
Bakwas video
NADEEMJOHN
NADEEMJOHN
NADEEMJOHN