Simple CSS Form Checkbox Toggle

The HTML checkbox input is one of the oldest elements to be introduced to HTML. So it’s no surprise that I’m tired of looking at them. But the element is crucial to forms and not going away any time soon. I prefer the look and feel of toggle switches, possibly because of the iOS toggles so commonly used.

There was a time when you needed Javascript to assist with the animation and handling of this style of toggle. No longer. Below is a simple and elegant CSS only solution to handling the toggle.

Sample CSS Toggle Button:

Simple HTML Checkbox Toggle

<div class="toggle-wrapper">
  <input class="toggle-input" type="checkbox" id="my-field-id" name="my-field" value="true" />
  <label for="my-field-id" class="toggle-button"><span>My Label Text</span></label>

Simple CSS Checkbox Toggle

.toggle-wrapper {
    position: relative;
label.toggle-button > span {
    position: absolute;
    left: -9999px;
label.toggle-button {
    background: #c87074;
    border-radius: 12px;
    cursor: pointer;
    display: inline-block;
    height: 24px;
    width: 50px;
label.toggle-button:before {
    background: #fff;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    content: ' ';
    display: block;
    height: 20px;
    width: 20px;
    position: absolute;
    top: 2px;
    left: 2px;
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
input.toggle-input:checked ~ label.toggle-button {
    background: green;
input.toggle-input:checked ~ label.toggle-button:before {
    -webkit-transform: translate(26px, 0);
    -moz-transform: translate(26px, 0);
    -ms-transform: translate(26px, 0);
    -o-transform: translate(26px, 0);
    transform: translate(26px, 0);

That’s it! It works like magic. I love using this checkbox toggle for forms that turn modules or features on and off.

Customizing The WordPress Registration Form

Often times, people want a way to modify the look of the registration form page in WordPress. However, this desired outcome is often misplaced. What most people want to do is simply place the form on a page, such as the home page or special registration page. Continue reading Customizing The WordPress Registration Form

Set a Container to the Window Height with jQuery

A common issue with CSS is finding the best way to set anĀ element, such as a div, to stretch from the top of the screen, to the bottom of the screen. You can do this with positioning. Sometimes, though, you want the div to start from after the banner, navigation, or something else. This creates some additional variables. You also need to account for what happens if someone resizes the screen. Continue reading Set a Container to the Window Height with jQuery

Create a SpeedBump with jQuery & the Bootstrap Modal

A speedbump is a essentially a confirmation dialogue when a website visitor clicks a link to leave your site. Speedbumps are actually required by law in some countries for industries such as Credit Unions and banks. There are several ways to create a speedbump, and I’m going to show you just one way. You can borrow or adapt any part of these methods for your own site. Continue reading Create a SpeedBump with jQuery & the Bootstrap Modal