diff --git a/scss/ionic/_checkbox.scss b/scss/ionic/_checkbox.scss
index 20ab8f0723..d29b3d971e 100644
--- a/scss/ionic/_checkbox.scss
+++ b/scss/ionic/_checkbox.scss
@@ -4,46 +4,56 @@
   display: inline-block;
   padding: ($checkbox-height / 4) ($checkbox-width / 4);
   cursor: pointer;
+}
 
-  input {
-    display: none;
-  }
+.checkbox input {
+  position: relative;
+  width: $checkbox-width;
+  height: $checkbox-height;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+  -webkit-appearance: none;
 
-  /* what the checkbox looks like when its not checked */
-  .handle {
-    width: $checkbox-width;
-    height: $checkbox-height;
+  &:before {
+    /* what the checkbox looks like when its not checked */
+    display: table;
+    width: 100%;
+    height: 100%;
     border: $checkbox-border-width solid $checkbox-off-border-color;
     border-radius: $checkbox-border-radius;
     background: $checkbox-off-bg-color;
+    content: ' ';
     transition: background-color .1s ease-in-out;
   }
+}
 
-  /* the checkmark within the box */
-  .handle:after {
-    position: absolute;
-    top: 37%;
-    left: $checkbox-width / 2;
-    width: $checkbox-width / 2;
-    height: $checkbox-width / 4;
-    border: $checkbox-check-width solid $checkbox-check-color;
-    border-top: none;
-    border-right: none;
-    content: '';
-    opacity: 0;
-    transition: opacity .05s ease-in-out;
+/* the checkmark within the box */
+.checkbox input:after {
+  position: absolute;
+  top: 37%;
+  left: 26%;
+  display: table;
+  width: $checkbox-width / 2;
+  height: $checkbox-width / 4;
+  border: $checkbox-check-width solid $checkbox-check-color;
+  border-top: none;
+  border-right: none;
+  content: ' ';
+  opacity: 0;
+  transition: opacity .05s ease-in-out;
 
-    -webkit-transform: rotate(-45deg);
-    transform: rotate(-45deg);
-  }
+  -webkit-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+}
 
-  /* what it looks like when it is checked */
-  input:checked + .handle {
-    background: $checkbox-on-bg-color;
+/* what the background looks like when its checked */
+.checkbox input:checked:before {
+  border: 0;
+  background: $checkbox-on-bg-color;
+}
 
-    &:after {
-      opacity: 1;
-    }
-  }
-
-}
\ No newline at end of file
+/* what the checkmark looks like when its checked */
+.checkbox input:checked:after {
+  opacity: 1;
+}
diff --git a/test/input-checkbox.html b/test/input-checkbox.html
index 12d5d4bf65..8c146febf6 100644
--- a/test/input-checkbox.html
+++ b/test/input-checkbox.html
@@ -20,17 +20,15 @@
         <ul class="list">
           <li class="list-item">
             Airplane Mode
-            <label class="checkbox" id="airplaneMode">
+            <div class="checkbox" id="airplaneMode">
                <input type="checkbox" name="airplaneMode">
-               <div class="handle"></div>
-            </label>
+            </div>
           </li>
           <li class="list-item">
             Do Not Disturb
-            <label class="checkbox" id="doNotDisturb">
+            <div class="checkbox" id="doNotDisturb">
                <input type="checkbox" name="doNotDisturb" checked="checked">
-               <div class="handle"></div>
-            </label>
+            </div>
           </li>
         </ul>
 
@@ -38,5 +36,7 @@
 
     </div>
 
+    <script src="../dist/js/ionic.js"></script>
+
   </body>
 </html>