From c04450d41fa27baa4419fbc043b15d4506bb8dd8 Mon Sep 17 00:00:00 2001 From: Simon van der Veldt Date: Mon, 20 Apr 2015 22:18:08 +0200 Subject: [PATCH 1/2] Style checkbox using wrapper div + label Fixes binarybucks/homA#85 Fixes the styling of the checkbox in Firefox --- interfaces/webinterface/css/app.css | 52 +++++++++++++++++++---------- interfaces/webinterface/index.html | 6 +++- 2 files changed, 39 insertions(+), 19 deletions(-) diff --git a/interfaces/webinterface/css/app.css b/interfaces/webinterface/css/app.css index 9593256..675f410 100644 --- a/interfaces/webinterface/css/app.css +++ b/interfaces/webinterface/css/app.css @@ -136,39 +136,55 @@ 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"] { - background: #efefef; - border-color: #d4d4d4; - cursor: pointer; + +/* Checkbox */ +.checkboxWrapper +{ width: 65px; + height: 30px; + display: inline-block; + overflow: hidden; + padding: 0; + position: relative; } -input[type="checkbox"]:after { - display: block; +.checkboxWrapper div +{ + width: 100%; + height:100%; + background: #efefef; position: relative; - background: #989898; - content: ''; - height: 26px; - width: 28px; - border-color: #818181; + top:-32px; border-width: 0px 0px 2px 0px; border-style: solid; + border-color: #d4d4d4; } -input[type="checkbox"]:checked { - padding-left: 40px; - padding-right: 0; -} -input[type="checkbox"]:checked:after { +.checkboxWrapper label +{ + display: block; + width: 28px; + height: 28px; + cursor: pointer; + position: absolute; + top: 0; + z-index: 100; + left: 0; background: #4aafd3; + border-width: 0px 0px 2px 0px; + border-style: solid; border-color: #428ea8; } + +.checkboxWrapper input[type=checkbox]:checked ~ label { + left: 37px; +} + /* Range */ .rangeWrapper { display: inline-block; diff --git a/interfaces/webinterface/index.html b/interfaces/webinterface/index.html index 66fa644..118ff94 100644 --- a/interfaces/webinterface/index.html +++ b/interfaces/webinterface/index.html @@ -119,7 +119,11 @@

<%= id %>

- /> +
+ <%= checkedAttribute %>/> + +
+