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 ...
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
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!!!
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.
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...
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
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
![โอ้เธอช่าง... - บี้เดอะสกา ft. ต๋อง เทวัญ (Prod. by ป๋าเพชร) [Official MV]](http://i.ytimg.com/vi/zbWhiLFmVL0/mqdefault.jpg)
![🔴 ฟุตบอลแชมป์กีฬา 7HD แชมเปียน คัพ 2024 [รอบรองชนะเลิศ]](http://i.ytimg.com/vi/zPm8ClLVhoE/mqdefault.jpg)
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.
THANK YOU!!! for breaking this down step by step. Didn't realize Wordpress was overriding my styling until I saw this video. Very GRATEFUL!!!
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 ...
Thank you very much this help me lot
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.
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
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!!!
Thank you! You're the best css player hehe
Win + Tab. Nice...
Thanks a lot. This tutorial was so helpful for a project.
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
this is cool and beautiful
i wanna steal your skills
Thanks man. Good tutorial but also add comments in code for beginners
this is the easy way to do it
Thank you bro. You are amazing
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?
What if I applied a delay to the input to turn blue only when the white circle touched the other end? 🤔
ty
Thanks
I learnt a lot from you👍.
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 you..
Thank you very much you are perfect
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...
thank you bhai
i really love it......
Great
How to do this with input{ all: unset;} in reset stylesheet???
good.thx
This is so perfect. Thanksssss
great
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
Nice
thanks legend!
Gracias
Thaaanks
thank you so much
THANK U
Salute!
God stuff, but, in input[type='checkbox'] css declaration, must be added -moz-apearance:none; for firefox compatibility
that's fantastic keep going!! if u add ur voice it would be better
Very nice 👌
Muchas Gracias, Excelente ejemplo
your video
It helped me a lot
Nice, thanks
my button which is scaled gets small when its checked and when cheked it scales(1.1)! solution?
Absolutely appreciated
You're the BEST
a perfect video. thank you very much! ♥️
Wow thank you so much, its so nice and easy to code. Really awesome!
Amazing
How to add dragging and snapping functionality along with click with js and css only?
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;"
Awesome Man
Perfect . Thank you
i prefer this song
*_good_*
thanksssss aaa trillion
You save me again thx bro
Me sirvio su video gracias
amazinggggggggggg
Awesome bro
NICE!!!!!!!!!!!!!!!!!!!!!! LIKE!!!!!!!!!!!!!!!!!!!!!!
fx
So many thanks for sharing it.
Yeah... this is more like it! It is good enough that it would probably make a JS Guru noticed your Kung Fu?
thank you very much, such a great help
Make a game using python or java
*Cool*
it doesn't work in other browsers. it only works in chrome. can you help me?
thaks for this
i don't know how make circle in center. in Microsoft Edge not work (
If I put this code in my CSS will it not affect every checkbox on my website?
Si
Thank you :)
instead of music u can explain the code too
Hey please add the codes on descriptions .
Great job!!!
How to style a radio button??
Красавчик
thaaaaanks !
Thanks. By the way, I like classical music, but that was tooooooooooooooo schmaltzy.
Send us , movie , you create app APK responsive scroll menu . Congratulations to you big developer congratulations to you
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;
}
Hey I'II can to replay your code in my language on my channel?
Muito bom, parabéns \o/
NADEEMJOHN
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?
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