/* ------------------------------------------------------------------------ This you can customize ------------------------------------------------------------------------- */ label.checkbox span.holder { height: 30px; /* Total height of your checkbox image */ background: url(../img/checkbox.png) 0 0px no-repeat; /* Path to your checkbox image */ } label.radio span.holder { height: 30px; /* Total height of your radio buttons image */ background: url(../images/prettyCheckboxes/radio.gif) 0 -1px no-repeat; /* Path to your radio button image */ } label.checkbox:hover span.holder, label.radio:hover span.holder { top: 0px !important; } /* Background position on mouseover */ label.checked span.holder, label.checked span.holder, label.checked:hover span.holder, label.checked:hover span.holder { top: -15px !important; } /* Background position when checked */ /* ------------------------------------------------------------------------ Customize at your own risk ------------------------------------------------------------------------- */ label.list { clear: left; } label.inline { float: left; margin: 0 10px 0 0; } input.hiddenCheckbox { position: absolute; left: -10000px; /* Hide the input */ } label.prettyCheckbox span.holderWrap { display: block; float: left; position: relative; margin-right: 5px; overflow: hidden; } label.prettyCheckbox span.holder { display: block; position: absolute; top: 0; left: 0; }