Merge pull request #136 from simonvanderveldt/fix-firefox-checkbox-st…

…yling Style checkbox using wrapper div + label
binarybucks · Apr 20, 2015 · 2a06470 · 2a06470
2 parents 9e52411 + 5de13f0
commit 2a06470
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 17 deletions.
diff --git a/interfaces/webinterface/css/app.css b/interfaces/webinterface/css/app.css
@@ -136,39 +136,57 @@ h2 {
 input {
     margin: 0; padding: 0; border: 0;
 }
-input[type="checkbox"], input[type="range"] {
+input[type="range"] {
     border-width: 0px 0px 2px 0px;
     height: 28px;
     border-style: solid;
     margin-top: -2px;
     -webkit-appearance: none;
 }
-/* Switch */
-input[type="checkbox"] {
+
+/* Checkbox */
+.checkboxWrapper
+{
+    width: 65px;
+    height: 30px;
+    display: inline-block;
+    overflow: hidden;
+    padding: 0;
+    position: relative;
+}
+.checkboxWrapper div
+{
+    width: 100%;
+    height:100%;
     background: #efefef;
+    position: relative;
+    top:-32px;
+    border-width: 0px 0px 2px 0px;
+    border-style: solid;
     border-color: #d4d4d4;
-    cursor: pointer;
-    width: 65px;
 }
-input[type="checkbox"]:after { 
+.checkboxWrapper label
+{
     display: block;
-    position: relative;
-    background: #989898;
-    content: '';
-    height: 26px;
     width: 28px;
-    border-color: #818181;
+    height: 28px;
+    cursor: pointer;
+    position: absolute;
+    top: 0;
+    z-index: 100;
+    left: 0;
+    background: #989898;
     border-width: 0px 0px 2px 0px;
     border-style: solid;
+    border-color: #818181;
 }
-input[type="checkbox"]:checked {
-    padding-left: 40px;
-    padding-right: 0;
-}
-input[type="checkbox"]:checked:after {
+
+.checkboxWrapper input[type=checkbox]:checked ~ label {
+    left: 37px;
     background: #4aafd3;
     border-color: #428ea8;
 }
+
 /* Range */
 .rangeWrapper { 
     display: inline-block;

diff --git a/interfaces/webinterface/index.html b/interfaces/webinterface/index.html
@@ -119,7 +119,11 @@ <h2>
       <h2>
         <%= id %>
       </h2>
-      <input type="checkbox" <%= checkedAttribute %>/> 
+      <div class="checkboxWrapper">
+        <input type="checkbox" value="1" id=<%= id %> <%= checkedAttribute %>/>
+        <label for=<%= id %>></label>
+        <div></div>
+      </div>
     </script>
     <script id="text-control-template" type="text/template">
       <h2>