.ace
class and a .lbl element follows it:
.lbl element
inside a label for better click response, except for some cases such as re-styling
jqGrid checkboxes (see Notes below)
.ace-checkbox-2 class for another checkbox style:
.ace-switch.ace-switch-2.ace-switch-3.ace-switch-4.ace-switch-5.ace-switch-6.ace-switch-7.btn-rotate makes the bars horizontal:
.btn-empty hides the bars:
.btn-flat makes the checkbox rectangular:
data-lbl attribute of the
.lbl element.
assets/css/less/form/checkbox.less
and modify @switch-1-text variables and re-compile LESS files into CSS.
/* for default switch element */
input[type=checkbox].ace.ace-switch + .lbl::before {
text-indent: -21px;
}
input[type=checkbox].ace.ace-switch:checked + .lbl::before {
text-indent: 8px;
}
/* or other ones */
input[type=checkbox].ace.ace-switch.ace-switch-4 + .lbl::before {
text-indent: -25px;
}
input[type=checkbox].ace.ace-switch.ace-switch-4:checked + .lbl::before {
text-indent: 9px;
}
.lbl to be inserted
immediately after checkbox element, fails:
Checkboxes won't be displayed here.
.ace class to have default browser checkbox or
you can use CSS builder tool and enable ASP.NET friendly checkboxes
option.
Please note that your checkbox element should only have one .lbl sibling:
That's because
label element should only have one input element which
in this is the "hidden" input.
position:relative.
.pos-rel element:
.lbl inside a label.
form.find('input[type=checkbox]')
.addClass('ace ace-switch ace-switch-5').after('<span class="lbl"></span>');
Checkbox should not be wrapped inside label because it conflicts with
plugin's data upload mechanism.
.middle class to .lbl
element:
.padding-* class for .lbl element:
Possible values are
.padding-2 .padding-4 ... .padding-16