Replaced slide checkbox images with sprite

code/html/checkboxes.css

@@ -1,16 +1,20 @@
 .iPhoneCheckContainer {
-  -webkit-transform:translate3d(0,0,0);
-  position: relative;
-  height: 27px;
-  cursor: pointer;
-  overflow: hidden; }
-  .iPhoneCheckContainer input {
+    -webkit-transform:translate3d(0,0,0);
+    position: relative;
+    height: 27px;
+    cursor: pointer;
+    overflow: hidden;
+}
+
+.iPhoneCheckContainer input {
     position: absolute;
     top: 5px;
     left: 30px;
     filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
-    opacity: 0; }
-  .iPhoneCheckContainer label {
+    opacity: 0;
+}
+
+.iPhoneCheckContainer label {
     white-space: nowrap;
     font-size: 17px;
     line-height: 17px;
@@ -23,51 +27,100 @@
     width: auto;
     top: 0;
     padding-top: 5px;
-    overflow: hidden; }
-  .iPhoneCheckContainer, .iPhoneCheckContainer label {
+    overflow: hidden;
+}
+
+.iPhoneCheckContainer, .iPhoneCheckContainer label {
     user-select: none;
     -moz-user-select: none;
-    -khtml-user-select: none; }
+    -khtml-user-select: none;
+}
 
 .iPhoneCheckDisabled {
-  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
-  opacity: 0.5; }
+    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
+    opacity: 0.5;
+}
+
+div.iPhoneCheckBorderOn {
+    position: absolute;
+    left: 0;
+    width: 4px;
+    height: 100%;
+    background-image: url('images/check.png');
+    background-repeat: no-repeat;
+    background-position: 0px 0px;
+}
 
 label.iPhoneCheckLabelOn {
-  color: white;
-  background: url('images/on.png') no-repeat;
-  text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.6);
-  left: 0;
-  padding-top: 5px; }
-  label.iPhoneCheckLabelOn span {
-    padding-left: 8px; }
+    color: white;
+    background-image: url('images/check.png');
+    background-repeat: repeat-x;
+    background-position: 0px -27px;
+    text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.6);
+    left: 0;
+    padding-top: 5px;
+    margin-left: 4px;
+    margin-top: 0px;
+}
+
+label.iPhoneCheckLabelOn span {
+    padding-left: 4px;
+}
+
 label.iPhoneCheckLabelOff {
-  color: #8b8b8b;
-  background: url('images/off.png') no-repeat right 0;
-  text-shadow: 0px 0px 2px rgba(255, 255, 255, 0.6);
-  text-align: right;
-  right: 0; }
-  label.iPhoneCheckLabelOff span {
-    padding-right: 8px; }
+    color: #8b8b8b;
+    background-image: url('images/check.png');
+    background-repeat: repeat-x;
+    background-position: 0px -54px;
+    text-shadow: 0px 0px 2px rgba(255, 255, 255, 0.6);
+    text-align: right;
+    margin-right: 4px;
+    margin-top: 0px;
+    right: 0;
+}
 
-.iPhoneCheckHandle {
-  display: block;
-  height: 27px;
-  cursor: pointer;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 0;
-  background: url('images/slider_left.png') no-repeat;
-  padding-left: 3px; }
+label.iPhoneCheckLabelOff span {
+    padding-right: 4px;
+}
 
-.iPhoneCheckHandleRight {
-  height: 100%;
-  width: 100%;
-  padding-right: 3px;
-  background: url('images/slider_right.png') no-repeat right 0; }
+div.iPhoneCheckBorderOff {
+    position: absolute;
+    width: 4px;
+    height: 100%;
+    background-image: url('images/check.png');
+    background-repeat: no-repeat;
+    background-position: 0px -81px;
+}
+
+.iPhoneCheckHandle {
+    display: block;
+    height: 27px;
+    cursor: pointer;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 0;
+    background-image: url('images/check.png');
+    background-repeat: no-repeat;
+    background-position: 0px -108px;
+    padding-left: 4px;
+}
 
 .iPhoneCheckHandleCenter {
-  height: 100%;
-  width: 100%;
-  background: url('images/slider_center.png'); }
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background-image: url('images/check.png');
+    background-repeat: repeat-x;
+    background-position: 0px -135px;
+}
+
+.iPhoneCheckHandleRight {
+    position: absolute;
+    height: 100%;
+    width: 4px;
+    right: 0px;
+    background-image: url('images/check.png');
+    background-repeat: no-repeat;
+    background-position: 0px -162px;
+}

code/html/checkboxes.js

@@ -63,8 +63,13 @@
       this.offLabel = $("<label class='" + this.labelOffClass + "'>\n  <span>" + this.uncheckedLabel + "</span>\n</label>").appendTo(this.container);
       this.offSpan = this.offLabel.children('span');
       this.onLabel = $("<label class='" + this.labelOnClass + "'>\n  <span>" + this.checkedLabel + "</span>\n</label>").appendTo(this.container);
+      this.onBorder = $("<div class='iPhoneCheckBorderOn'</div>").appendTo(this.container);
+      this.offBorder = $("<div class='iPhoneCheckBorderOff'</div>").appendTo(this.container);
       this.onSpan = this.onLabel.children('span');
-      return this.handle = $("<div class='" + this.handleClass + "'>\n  <div class='" + this.handleRightClass + "'>\n    <div class='" + this.handleCenterClass + "' />\n  </div>\n</div>").appendTo(this.container);
+      this.handle = $("<div class='" + this.handleClass + "'></div>").appendTo(this.container);
+      this.handleCenter = $("<div class='" + this.handleCenterClass + "'></div>").appendTo(this.handle);
+      this.handleRight = $("<div class='" + this.handleRightClass + "'></div>").appendTo(this.handle);
+      return true;
     };
 
     iOSCheckbox.prototype.disableTextSelection = function() {
@@ -98,8 +103,11 @@
         });
       } else {
         newWidth = onLabelWidth > offLabelWidth ? onLabelWidth : offLabelWidth;
+        this.handleCenter.css({
+            width: newWidth + 4
+        });
         return this.handle.css({
-          width: newWidth
+          width: newWidth + 7
         });
       }
     };
@@ -181,7 +189,7 @@
       } else {
         this.container.removeClass(this.disabledClass);
       }
-      new_left = this.elem.prop('checked') ? this.rightSide : 0;
+      new_left = this.elem.prop('checked') ? this.rightSide + 2 : 0;
       this.handle.animate({
         left: new_left
       }, this.duration);
@@ -223,7 +231,10 @@
 
       containerWidth = this._getDimension(this.container, "width");
       this.offLabel.css({
-        width: containerWidth - this.containerRadius
+        width: containerWidth - this.containerRadius - 4
+      });
+      this.offBorder.css({
+          left: containerWidth - 4
       });
       offset = this.containerRadius + 1;
       if ($.browser.msie && $.browser.version < 7) {
@@ -238,7 +249,7 @@
           width: this.rightSide + this.handleRadius
         });
         this.offSpan.css({
-          marginRight: -this.rightSide
+          marginRight: -this.rightSide,
         });
       } else {
         this.onLabel.css({

code/html/custom.css

@@ -54,11 +54,3 @@ div.hint {
     color: #ccc;
     margin-top: -5px;
 }
-.iPhoneCheckContainer {
-    margin-top: -10px;
-    letter-spacing: 0em;
-    height: 36px;
-}
-.iPhoneCheckHandle {
-    top: 9px;
-}