Extending Toggles
For toggle overview, see toggles.
Custom Toggle Switch using Images
Customize:
the toggle-switch button in the off position with
input.toggle-switch:empty ~ .toggle-switch-bar:after {}
.the toggle-switch button icon in the off position with
input.toggle-switch:empty ~ .toggle-switch-bar .toggle-switch-icon.button-icon {}
.the toggle-switch bar in the off position with
input.toggle-switch:empty ~ .toggle-switch-bar:before {}
.the toggle-switch bar icon in the off position with
input.toggle-switch:empty ~ .toggle-switch-bar .toggle-switch-icon-off {}
.the toggle-switch button in the on position with
input.toggle-switch:checked ~ .toggle-switch-bar:after {}
.the toggle-switch button icon in the on position with
input.toggle-switch:checked ~ .toggle-switch-bar .toggle-switch-icon.button-icon
.the toggle-switch bar in the on position with
input.toggle-switch:checked ~ .toggle-switch-bar:before {}
.the toggle-switch bar icon in the on position with
input.toggle-switch:checked ~ .toggle-switch-bar .toggle-switch-icon-on {}
.
<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>
iOS Style Toggle Switches
<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>