DEV Community

loading...
Cover image for Nice Looking CSS Toggles
IntegridSolutions

Nice Looking CSS Toggles

nirazanbasnet profile image Nirazan Basnet Originally published at nirajanbasnet.com.np ใƒปUpdated on ใƒป2 min read

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)

pic
Editor guide
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.