Css Custom Animated Checkbox - How to make CSS switch / toggle / custom checkbox - No Javascript
HTML-код
- Опубликовано: 17 сен 2017
- Enroll My Course : Next Level CSS Animation and Hover Effects
www.udemy.com/course/css-hove...
------------------
Join Our Channel Membership And Get Source Code Everyday
Join : / @onlinetutorialsyt
------------------
Please LIKE our Facebook page for daily updates...
/ online-tutorial-html-c...
![TRASH or PASS! Eminem ( Houdini ) [REACTION!!!]](http://i.ytimg.com/vi/cB1WrZcMwMc/mqdefault.jpg)
THANK YOU!!! for breaking this down step by step. Didn't realize Wordpress was overriding my styling until I saw this video. Very GRATEFUL!!!
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.
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.
This is so perfect. Thanksssss
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 ...
Thanks a lot. This tutorial was so helpful for a project.
Muchas Gracias, Excelente ejemplo
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!!!
Wow thank you so much, its so nice and easy to code. Really awesome!
a perfect video. thank you very much! ♥️
Thank you! You're the best css player hehe
I learnt a lot from you👍.
thank you very much, such a great help
that's fantastic keep going!! if u add ur voice it would be better
You save me again thx bro
Absolutely appreciated
this is cool and beautiful
your video
It helped me a lot
Win + Tab. Nice...
You're the BEST
Thank you bro. You are amazing
Perfect . Thank you
So many thanks for sharing it.
Thank you very much this help me lot
Great job!!!
Thank you very much you are perfect
Awesome bro
Amazing
Muito bom, parabéns \o/
i really love it......
Great
Awesome Man
Very nice 👌
thanks legend!
Thank you :)
Me sirvio su video gracias
Nice, thanks
Yeah... this is more like it! It is good enough that it would probably make a JS Guru noticed your Kung Fu?
Thaaanks
good.thx
Salute!
thank you so much
thaks for this
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
Thanks
thank you..
*Cool*
thank you bhai
What if I applied a delay to the input to turn blue only when the white circle touched the other end? 🤔
Thanks man. Good tutorial but also add comments in code for beginners
Nice
thanksssss aaa trillion
great
amazinggggggggggg
NICE!!!!!!!!!!!!!!!!!!!!!! LIKE!!!!!!!!!!!!!!!!!!!!!!
fx
Красавчик
ty
THANK U
How to add dragging and snapping functionality along with click with js and css only?
Gracias
thaaaaanks !
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
*_good_*
this is the easy way to do it
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
i wanna steal your skills
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 prefer this song
How to do this with input{ all: unset;} in reset stylesheet???
Thanks. By the way, I like classical music, but that was tooooooooooooooo schmaltzy.
my button which is scaled gets small when its checked and when cheked it scales(1.1)! solution?
How to style a radio button??
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...
Send us , movie , you create app APK responsive scroll menu . Congratulations to you big developer congratulations to you
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
@@ewenlbh TRUE
what is the background music?
it doesn't work in other browsers. it only works in chrome. can you help me?
i don't know how make circle in center. in Microsoft Edge not work (
Hey please add the codes on descriptions .
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;"
Make a game using python or java
If I put this code in my CSS will it not affect every checkbox on my website?
Si
Hey I'II can to replay your code in my language on my channel?
instead of music u can explain the code too
NADEEMJOHN
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;
}
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
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?
NADEEMJOHN
NADEEMJOHN
NADEEMJOHN