Nice checkbox and radio button styles

public/css/ios7.less

@@ -155,6 +155,79 @@ label {
   .form-control-validation(#d9534f; #d9534f; #d9534f);
 }
 
+.radio,
+.checkbox {
+  margin: 0 0 10px;
+}
+
+.radio-inline,
+.checkbox-inline {
+  padding-top: 9px;
+  margin-right: 20px;
+}
+
+.radio-inline + .radio-inline,
+.radio-inline + .checkbox-inline,
+.checkbox-inline + .radio-inline,
+.checkbox-inline + .checkbox-inline {
+  margin-left: 0;
+}
+
+input[type="checkbox"],
+input[type="radio"] {
+  display: none;
+}
+
+input[type="checkbox"] + span:before,
+input[type="radio"] + span:before {
+  content: "";
+  width: 18px;
+  height: 18px;
+  display: inline-block;
+  vertical-align: middle;
+  margin-right: 10px;
+  margin-left: -20px;
+  background: white;
+  border-radius: 3px;
+  border: 1px solid #c8c8c8;
+}
+
+input[type="checkbox"]:checked + span:before {
+  background: #007aff url("../img/checkmark.png") no-repeat center center;
+  border-color: #007aff;
+}
+
+@media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
+  input[type="checkbox"]:checked + span:before {
+    background-image: url("../img/checkmark@2x.png");
+    background-size: 14px 14px;
+  }
+}
+
+input[type="radio"] {
+  display: none;
+}
+
+input[type="radio"] + span {
+  position: relative;
+}
+
+input[type="radio"] + span:before {
+  border-radius: 50%;
+}
+
+input[type="radio"]:checked + span:after {
+  content: "";
+  width: 8px;
+  height: 8px;
+  position: absolute;
+  top: 6px;
+  left: -15px;
+  background-color: #007aff;
+  border-radius: 50%;
+  display: block;
+}
+
 // Misc ===================================================================
 .login-container {
   background-color: rgba(255, 255, 255, 0.95);
@@ -197,6 +270,7 @@ label {
 
     .checkbox {
       display: inline-block;
+      margin: 0 0 10px;
     }
   }