Extending Toggles

<style>
    #demoToggleSwitch input.toggle-switch:empty ~ .toggle-switch-bar:after {
        background-color: transparent;
        background-image: url(../../images/switch_button.png);
        background-repeat: no-repeat;
        background-size: 100%;
        border-width: 0;
        bottom: 0;
        height: auto;
        left: 2px;
        top: 1px;
        width: 22px;
    }

    #demoToggleSwitch input.toggle-switch:empty ~ .toggle-switch-bar:before {
          background-color: transparent;
          background-image: url(../../images/switch_base.png);
          background-repeat: no-repeat;
          background-size: 100%;
          border-radius: 20px;
          border-width: 0;
          width: 51px;
    }

    #demoToggleSwitch input.toggle-switch:empty ~ .toggle-switch-bar .toggle-switch-icon-off {
        background-image: url(../../images/switch_off_icon.png);
        background-repeat: no-repeat;
        background-size: 100%;
        height: 15px;
        left: 28px;
        top: 4px;
        width: 15px;
    }

    #demoToggleSwitch input.toggle-switch:checked ~ .toggle-switch-bar:after {
        left: 26px;
    }

    #demoToggleSwitch input.toggle-switch:checked ~ .toggle-switch-bar .toggle-switch-icon-on {
        background-image: url(../../images/switch_on_icon.png);
        background-repeat: no-repeat;
        background-size: 100%;
        height: 17px;
        left: 5px;
        top: 4px;
        width: 17px;
    }

    @media (min-width: 768px) {
        #demoToggleSwitch input.toggle-switch:empty ~ .toggle-switch-bar:after {
            width: 30px;
        }

        #demoToggleSwitch input.toggle-switch:empty ~ .toggle-switch-bar:before {
            width: 68px;
        }

        #demoToggleSwitch input.toggle-switch:empty ~ .toggle-switch-bar .toggle-switch-icon-off {
            left: 40px;
            top: 8px;
        }

        #demoToggleSwitch input.toggle-switch:checked ~ .toggle-switch-bar:after {
            left: 35px;
        }

        #demoToggleSwitch input.toggle-switch:checked ~ .toggle-switch-bar .toggle-switch-icon-on {
            left: 12px;
            top: 8px;
        }
    }
</style>

<div class="form-group">
    <label>
      <input class="toggle-switch" type="checkbox">

      <span aria-hidden="true" class="toggle-switch-bar">
          <span class="toggle-switch-handle">
              <span class="toggle-switch-icon toggle-switch-icon-on"></span>
              <span class="toggle-switch-icon toggle-switch-icon-off"></span>
          </span>
      </span>
    </label>
</div>

<style>
    /* Toggle Switch Off Button */
    .ios-toggle-switch input.toggle-switch:empty ~ .toggle-switch-bar:after {
        background-color: #FFF;
        border-width: 0;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
        height: 27px;
        left: 2px;
        top: 2px;
        width: 27px;
    }

    /* Toggle Switch On Button */
    .ios-toggle-switch input.toggle-switch:checked ~ .toggle-switch-bar:after {
        border-width: 0;
        left: 31px;
    }

    /* Toggle Switch Off Bar */
    .ios-toggle-switch input.toggle-switch:empty ~ .toggle-switch-bar:before {
        background-color: #FEFEFE;
        border: 1px solid #E6E6E6;
    }

    /* Toggle Switch On Bar */
    .ios-toggle-switch input.toggle-switch:checked ~ .toggle-switch-bar:before {
        background-color: #4BD863;
        border-color: #4BD863;
    }

    /* Toggle Switch On Bar Icon */
    .ios-toggle-switch input.toggle-switch:empty ~ .toggle-switch-bar .toggle-switch-icon-off {
        color: #B5B5B5;
        font-size: 15px;
        line-height: 19px;
    }
</style>

<div class="form-group ios-toggle-switch">
    <label>
        <input class="toggle-switch" type="checkbox">

        <span aria-hidden="true" class="toggle-switch-bar">
            <span class="toggle-switch-handle">
                <span class="toggle-switch-icon toggle-switch-icon-on">|</span>
                <span aria-hidden="true" class="icon-circle-blank toggle-switch-icon toggle-switch-icon-off"></span>
            </span>
        </span>
    </label>
</div>