DEV Community

Cover image for Nice Looking CSS Toggles
Nirazan Basnet for IntegridSolutions

Posted on • Updated on • Originally published at nirajanbasnet.com.np

Nice Looking CSS Toggles

When we need a switch toggles designs to implement, there is always a challenge for me to find a perfect CSS Toggles. We can find lots of awesome frameworks to work with but they are just heavy in size to use.

I found this little pure CSS library MoreToggles.css which has a variety of nice-looking toggles.

You only have to add a new ClassName to the wrapper div and this library will do the magic for you.

Features

  • Pure CSS
  • 8 different styles
  • Perfect scaling
  • More styles are coming soon!!

Pure CSS Toggles


Let’s jump it out it's usage

Import the stylesheet

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/JNKKKK/MoreToggles.css/output/moretoggles.min.css">
</head>
Enter fullscreen mode Exit fullscreen mode

Wrap an extra div around your <input> and <label>. Add a mt-* class to it.

<div class="mt-ios-red"> 
  <input id="2" type="checkbox" />
  <label for="2"></label>
</div>
Enter fullscreen mode Exit fullscreen mode

Varieties of styles

Pure CSS Toggles

You can scale the toggles by assigning a font-size attribute style="font-size:10px;" to the wrapper div. You can try different numbers and the toggle will scale smoothly.

<div class="mt-ios" style="font-size:10px;">
  <input id="3" type="checkbox" />
  <label for="3"></label>
</div>
Enter fullscreen mode Exit fullscreen mode

Disabled Toggles

Just like regular checkbox, you can add a disabled attribute to <input> tag.

<div class="mt-ios">
  <input id="4" type="checkbox" disabled/>
  <label for="4"></label>
</div>
Enter fullscreen mode Exit fullscreen mode

Notice

Be careful on nesting the <input> directly inside the <label> is NOT supported, although it is valid HTML syntax

Don’t 😠

<div class="mt-ios"> 
  <label>
    <input type="checkbox" />
  </label>
</div>
Enter fullscreen mode Exit fullscreen mode

Do πŸ˜ƒ

<div class="mt-ios">
    <input id="1" type="checkbox" />
    <label for="1"></label> 
</div>
Enter fullscreen mode Exit fullscreen mode

Thanks to Enkai Ji, for creating this little pure CSS toggles. You can download this library from here.


Conclusion

πŸ‘πŸ‘ By coming this far I hope you can use these pure CSS toggles to style awesome toggle switches. So, I suggest you give it a try on your project and enjoy it!

Feel free to share your thoughts and opinions and leave me a comment if you have any problems or questions.

Till then,
Keep on Hacking, Cheers

Discussion (1)

Collapse
maxart2501 profile image
Massimo Artizzu

Be careful on nesting the <input> directly inside the <label> is NOT supported, although it is valid HTML syntax

Can you clarify this bit? I've always read different opinions on this. It's an accessibility issue, I guess?

What I know is:

  • browsers work fine with that, consistently;
  • HTML spec would disallow an element inside another if that wasn't meant to be supported;
  • some screen readers do handle that well (maybe some don't?);
  • although many suggest to use an id and a for attribute anyway.

That being said, I stopped putting <input> elements inside <label>s a while ago just to be safe, but there's still this uncertainty that bugs me.