Toggle-Checkbox is a mobile-like toggle switch on Webpages based on purely HTML and CSS3. It is based on checkbox input so you can capture its value just like normal form input. You can also easily change its layout using simply HTML and CSS. It supports most of the modern desktop and mobile browsers. For more specific information, plesase have a look at the Browser Support section.
Demo Page
If you need to support older browsers or want flexibility in more details, I am planing on a jQuery version. Please stay tuned and I will update this section when it is published.
- 100% Pure HTML and CSS3 rendered
- Checkbox input based. You can easily check the value at local or server side like normal form input
- Flexibility in toggle switch's size and colour without lost of details
- Change layout using purely HTML and CSS
- Extract the css folder and its content to your site directory
- add the following code inside the
<head>section of the webpage.
<link href="css/toggle-checkbox.css" rel="stylesheet" type="text/css" />Simply copy the code to the desired position. For more usage examples visit the Demo Page.
<label class="toggle-checkbox">
<input type="checkbox" />
<div class="toggle-bg"><div class="toggle-btn"></div></div>
</label>To have wider toggle switch, set the width of the class="toggle-bg" element, the height of the toggle switch will be calculated correspond to the width automatically.
<label class="toggle-checkbox">
<input type="checkbox" />
<div class="toggle-bg" style="width: 100px"><div class="toggle-btn"></div></div>
</label>By changing the border and background-color property of the class="toggle-bg" and class="toggle-btn" element , you can customize the layout.
If you want to have a toggle switch bar with fixed height, you can add the class toggle-fixedheight to the class=toggle-checkbox element and specific your own height at the class=toggle-bg element".
<label class="toggle-checkbox toggle-fixedheight">
<input type="checkbox" />
<div class="toggle-bg" style="height: 30px"><div class="toggle-btn"></div></div>
</label><label id="fixedheight-toggle-checkbox-textbtn" class="toggle-checkbox">
<input type="checkbox" />
<div class="toggle-bg"><div class="toggle-btn">O</div></div>
</label>If you have applied fixed height to the toggle switch, remember to set the line-height of class=toggle-bg element as well
<label id="fixedheight-toggle-checkbox-dynamictextbtn" class="toggle-checkbox">
<input type="checkbox" />
<div class="toggle-bg">
<div class="toggle-btn">
<span class="toggle-btn-yes">Y</span>
<span class="toggle-btn-no">N</span>
</div>
</div>
</label><label id="fixedheight-toggle-checkbox-with-text" class="toggle-checkbox toggle-fixedheight">
<input type="checkbox" />
<div class="toggle-bg">
<span class="toggle-bg-texton">On</span>
<div class="toggle-btn"></div>
<span class="toggle-bg-textoff">Off</span>
</div>
</label>Since text at background usually span a longer width than its containing space, you can apply Wider Fixed Height to the element as well
- Google Chrome (latest)
- Mozilla Firefox (latest)
- Apple Safari (latest)
- Microsoft Edge (latest)
- Internet Explorer (9+, IE9 has no transition effect)
- Opera (Testing)
- Android Browser (latest)
- Google Chrome on Android (latest)
- Apple Safari on iOS (latest)
- Google Chrome on iOS (latest)
- 27 Jan, 2016, Version 1.0.0
- Rebuild repository
- 12 Jan, 2016, Version 1.0.0
- First published
Copyright (c) Yu H. Published under The MIT License (MIT)