Css Custom Animated Checkbox - How to make CSS switch / toggle / custom checkbox - No Javascript

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...

[@Funnycreature17]

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.

[@reallygood7580]

this should get more likes, because its true

[@MrHouloul]

can you write it I dont understand

[@Funnycreature17]

@@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.

[@daylinjones7194]

THANK YOU!!! for breaking this down step by step. Didn't realize Wordpress was overriding my styling until I saw this video. Very GRATEFUL!!!

[@Edthewebsurfer]

Simple and to the point, thank you for uploading.

[@DcodeShow]

Wow, you are the man, this is an incredible use of inputs. Thank you for sharing.

[@zholy9]

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 ...

[@leonardocamargo5412]

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!!!

[@eypbal]

This is so perfect. Thanksssss

[@nicolaszarate2439]

Thanks a lot. This tutorial was so helpful for a project.

[@RenardBergson]

Thank you! You're the best css player hehe

[@emanueldiazmx]

Wow thank you so much, its so nice and easy to code. Really awesome!

[@alonsogza2890]

Muchas Gracias, Excelente ejemplo

[@animartedev]

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

[@Coding_Tricks771]

Thank you very much this help me lot

[@gyros9162]

this is cool and beautiful

[@DeshanUdupihilla]

a perfect video. thank you very much! ♥️

[@reallygood7580]

Win + Tab. Nice...

[@revanth9272]

I learnt a lot from you👍.

[@The_EpicVoice]

that's fantastic keep going!! if u add ur voice it would be better

[@luiza4142]

You save me again thx bro

[@martinflores9611]

your video It helped me a lot

[@ProMakerDev]

thank you very much, such a great help

[@emcasaempreendimentosimobi3229]

Perfect . Thank you

[@micromanBD]

So many thanks for sharing it.

[@aliabukahil]

Absolutely appreciated

[@nomanabid9394]

You're the BEST

[@cagb80]

Great job!!!

[@Ibrahimkhalil-hw4hd]

Thank you bro. You are amazing

[@xaxa730]

What if I applied a delay to the input to turn blue only when the white circle touched the other end? 🤔

[@Jamesis07]

Thank you very much you are perfect

[@edwingarcia5043]

Awesome bro

[@vincenzocristiano135]

thanks legend!

[@jaspreethayer2275]

Amazing

[@NinjaCoders]

thank you bhai

[@emre-vt6zi]

thank you..

[@gauravdewangan1460]

Thanks man. Good tutorial but also add comments in code for beginners

[@AruljothySundramoorthy]

Awesome Man

[@satyabratasahoo8665]

Very nice 👌

[@akshaybedared]

Thank you :)

[@douglaslisboa9]

Muito bom, parabéns \o/

[@ldawg214]

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.

[@ivanpoberezhniuk9694]

btw, it's obvious

[@deepaksarvepalli2344]

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...

[@PramitBiswas]

How to add dragging and snapping functionality along with click with js and css only?

[@edoBianchi]

good.thx

[@miriaandressa2734]

Nice, thanks

[@Error-zs1yn]

thank you so much

[@wilsommontec390]

Me sirvio su video gracias

[@princeyadav4294]

great

[@ismotarasrity4696]

Thanks

[@kikiriki2024]

Gracias

[@tsnode4098]

thaks for this

[@grinders2000]

THANK U

[@AdairAconzs]

Nice

[@iliasselaissi3890]

this is the easy way to do it

[@justb3m184]

Salute!

[@amine_ers]

Thaaanks

[@guylemay1471]

Yeah... this is more like it! It is good enough that it would probably make a JS Guru noticed your Kung Fu?

[@ck0024]

*Cool*

[@sujandrn6186]

i really love it......

[@OnlineTutorialsYT]

Great

[@user-sh4jl3hz2w]

i wanna steal your skills

[@hvxun9924]

amazinggggggggggg

[@tonnichowdhury7356]

thanksssss aaa trillion

[@CoderDmitri]

ty

[@michelventura3882]

thaaaaanks !

[@Peter_Gamerrr]

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

[@virtuoz-ru]

Красавчик

[@christianromero6815]

How to do this with input{ all: unset;} in reset stylesheet???

[@syediqbalahmed3176]

*_good_*

[@maazsiddiqui6324]

my button which is scaled gets small when its checked and when cheked it scales(1.1)! solution?

[@alexkotusenko302]

NICE!!!!!!!!!!!!!!!!!!!!!! LIKE!!!!!!!!!!!!!!!!!!!!!!

[@krmnPareDes]

fx

[@vijaygohil4685]

You have created the videos is very best or superb but I request that enter voice in your video and explain case property SVG

[@OnlineTutorialsYT]

+Vijay Gohil ok

[@rainchai851]

i prefer this song

[@cypherk]

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.

[@reallygood7580]

im not sure that it will work, but try "z-index: 1;"

[@luiza4142]

How to style a radio button??

[@bobsuk777]

God stuff, but, in input[type='checkbox'] css declaration, must be added -moz-apearance:none; for firefox compatibility

[@ewenlbh]

Bob Suk yeah and a display:none on the checkbox element would be way better

[@reallygood7580]

@@ewenlbh TRUE

[@mikebags6653]

it doesn't work in other browsers. it only works in chrome. can you help me?

[@user-bl2ij3be4c]

Thanks. By the way, I like classical music, but that was tooooooooooooooo schmaltzy.

[@Seyfettin0]

Hey please add the codes on descriptions .

[@end-me-please]

what is the background music?

[@SEMANCIEDADE]

Send us , movie , you create app APK responsive scroll menu . Congratulations to you big developer congratulations to you

[@SSCAT0]

i don't know how make circle in center. in Microsoft Edge not work (

[@controlccontrolv4519]

Hey I'II can to replay your code in my language on my channel?

[@ChrisAdams-fc2mn]

If I put this code in my CSS will it not affect every checkbox on my website?

[@julioalvarado1833]

Si

[@mdshabaz2591]

instead of music u can explain the code too

[@s.agamerz7962]

Make a game using python or java

[@NadeemJohn-xu4lu]

NADEEMJOHN

[@taranagnew436]

i've tried everything and i just get a square check-box and not wat you have, plz help

[@eccehomer8182]

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.

[@taranagnew436]

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; }

[@deepakgurung309]

input[type="checkbox'] is not working for firefox

[@CyanLuk]

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?

[@link2web658]

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

[@skentertainment337]

Bakwas video

[@letsfly662]

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-xu4lu]

NADEEMJOHN

[@NadeemJohn-xu4lu]

NADEEMJOHN

[@NadeemJohn-xu4lu]

NADEEMJOHN