Skip to main content

How to change the look and feel of toggle-style checkbox

You are here:

To change the look and feel of toggle-style checkbox;

  • Open Designer Interface,
  • Go to the ‘Stylesheet’ module.
  • Add a new stylesheet.
  • Choose toggle style checkbox control stylesheet from ‘Style Template’ for changing the look and feel of toggle-style checkbox.
  • Save the stylesheet by clicking on the “Save” button.
.toggle-on {
    text-indent: -9999px;
}
.toggle-off {
    text-indent: -9999px;
    left: 45%;
}
.toggle-handle {
    height: 28px !important;
    width: 28px;
    border-radius: 28px !important;
    margin-right: 22px;
    margin-top: -2px;
}

.toggle.btn {
    min-width: 59px;
    min-height: 26px;
    border-radius: 26px;
}

.dropdown-toggle {
    background: none;
}

.toggle.off .toggle-group {
    left: -58%;
}

.toggle-on.btn:hover {
    background: initial !important;
}

 

Tags: