How to make Custom Animated Checkboxes with CSS

Показать описание

Official site

Twitter

Рекомендации по теме

Комментарии

I know this is old but the "Mmm..." at the end killed me, great tutorial!

DrossProwler

Man your tuts restore my faith in the front end again.

calstate

Awesome video!

I just want to correct something that you said about label and input, the code below works just fine, you don't need to put one inside of another to work.

<input type="checkbox" name="check" id="item1">
<label for="item1">Item 1</label>

lucasbusellato

By supplying a for-attribute on the label and pass it the id of the input (checkbox) it will cause clicks on the label focus (check) the input. So you can place checkboxes outside the label.

zugdsbtngizudsgbnudsdsoiu

Awesome :)) I made a little animation on the checkbox when the user un-checks the button the result was pretty cool!!. Thanks to Trevis and Code course

manasemichaelmhando

I feel like a boss, now - because I managed to "translate" this to regular css-syntax while following the tutorial. Still old school.
The tricky part was the animation thing because of the vendor prefixes. Love the result, Travis, feels very organic. And right time for that, because that was one thing I needed to customize in bootstrap. My second most hated look there after the input-field glow there... Thx!

sdhpCH

Awesome! gonna implement this when I'm developing a new project!

InsaneMetalSoldier

Alex thanks alot for letting Travis come and teach us this! I totally love these tutorials from him and you both. :D Keep up the good work!

BippyMiester

I don't know why they still haven't changed the checkbox yet. So, we could perhaps style it like the same way as the other input box.
I also can't believe a video from 2014 will save my ass. Thanks Travis for saving this ass, again.
Quality content!

TheLollercaster

Thanks, but the title says "with CSS" and you're using SASS. What does the + icon before the CSS property mean?

basvandriel

How to make Custom Animated Checkboxes with CSS

codecourse

if you give the label a for attribute and the give the checkbox an id that matches the value of the for attribute, it doesn't matter where the checkbox is on the page, it would be selected if the label is clicked.
e.g
<label for="coolytbutton">click on me</label>
<input type="checkbox" id="coolytbutton">

samueloloruntoba

input element can be outside of label aswell and still work on clicking on label to check it if label has "FOR" attribute same as input's "ID" attribute ;) hope it helps ;) but nice tut... ;) love your and Alex's work, keep it up ;)
e.g.
<label
<input type="checkbox" name="checkbox" id="checkbox1" />

boska