Use our own style for checkboxes

2 files changed, 50 insertions, 21 deletions

diff --git a/index.html b/index.html
index 97da700..8f3af91 100644
--- a/index.html
+++ b/index.html
@@ -160,13 +160,13 @@
 
           <p>Der Anschlussinhaber wird in der Abmahnung als Täter angenommen. Dies ist meist inkorrekt. Gibt es Beweise, dass Sie nicht der Täter sind, wählen Sie das entsprechende Häkchen:</p>
 
-          <label><input id="alibi_urlaub" type="checkbox"/>Ich war nachweislich im Urlaub.</label>
-          <label><input id="alibi_ausserhalb" type="checkbox"/>Ich war nachweislich beruflich außerhalb Deutschlands.</label>
-          <label><input id="alibi_nichtzuhause" type="checkbox"/>Ich war nachweislich nicht zuhause.</label>
-          <label><input id="alibi_arbeit" type="checkbox"/>Ich war nachweislich auf Arbeit.</label>
-          <label><input id="alibi_besuch" type="checkbox"/>Ich hatte Besuch. Dieser kann bezeugen, dass ich meinen Computer nicht benutzt habe.</label>
-          <label><input id="alibi_keinendgeraet" type="checkbox"/>Ich besitze keinen internetfähigen Computer.</label>
-          <label><input id="alibi_nichtwohnhaft" type="checkbox"/>Zum angegebenen Zeitpunkt habe ich an der ermittelten Adresse nicht (mehr) gewohnt.</label>
+          <div><input id="alibi_urlaub" type="checkbox"/><label for="alibi_urlaub"><span></span>Ich war nachweislich im Urlaub.</label></div>
+          <div><input id="alibi_ausserhalb" type="checkbox"/><label for="alibi_ausserhalb"><span></span>Ich war nachweislich beruflich außerhalb Deutschlands.</label></div>
+          <div><input id="alibi_nichtzuhause" type="checkbox"/><label for="alibi_nichtzuhause"><span></span>Ich war nachweislich nicht zuhause.</label></div>
+          <div><input id="alibi_arbeit" type="checkbox"/><label for="alibi_arbeit"><span></span>Ich war nachweislich auf Arbeit.</label></div>
+          <div><input id="alibi_besuch" type="checkbox"/><label for="alibi_besuch"><span></span>Ich hatte Besuch. Dieser kann bezeugen, dass ich meinen Computer nicht benutzt habe.</label></div>
+          <div><input id="alibi_keinendgeraet" type="checkbox"/><label for="alibi_keinendgeraet"><span></span>Ich besitze keinen internetfähigen Computer.</label></div>
+          <div><input id="alibi_nichtwohnhaft" type="checkbox"/><label for="alibi_nichtwohnhaft"><span></span>Zum angegebenen Zeitpunkt habe ich an der ermittelten Adresse nicht (mehr) gewohnt.</label></div>
           <div class="one-button">
             <div class="button button-green" onclick="step4_done()">Weiter</div>
           </div>
@@ -179,13 +179,13 @@
         </div>
         <div class="juice">
           <p>Um nicht als Störer in Haftung genommen zu werden, sind Hinweise hilfreich, aus welchem Grund auch eine Störerhaftung nicht in Betracht kommt. Bitte wählen Sie die entsprechenden Häkchen.</p>
-          <label><input id="alibi_freifunk" type="checkbox"/>Ich betreibe ein Freifunk-Netzwerk.</label>
-          <label><input id="alibi_tornode" type="checkbox"/>Ich betreibe nachweislich einen Tor-Exit-Node.</label>
-          <label><input id="alibi_offeneswifi" type="checkbox"/>Ich betreibe ein offenes Netzwerk für das Haus.</label>
-          <label><input id="alibi_familie" type="checkbox"/>Neben mir benutzen mehrere Familienmitglieder mein Netzwerk.</label>
-          <label><input id="alibi_wg" type="checkbox"/>Neben mir benutzen mehrere Mitbewohner mein Netzwerk.</label>
-          <label><input id="alibi_nachbarn" type="checkbox"/>Neben mir benutzen mehrere Nachbarn mein Netzwerk.</label>
-          <label><input id="alibi_fluechtlingshilfe" type="checkbox"/>Ich stelle mein Netzwerk einem Flüchtlingsheim zur Verfügung.</label>
+          <div><input id="alibi_freifunk" type="checkbox"/><label for="alibi_freifunk"><span></span>Ich betreibe ein Freifunk-Netzwerk.</label></div>
+          <div><input id="alibi_tornode" type="checkbox"/><label for="alibi_tornode"><span></span>Ich betreibe nachweislich einen Tor-Exit-Node.</label></div>
+          <div><input id="alibi_offeneswifi" type="checkbox"/><label for="alibi_offeneswifi"><span></span>Ich betreibe ein offenes Netzwerk für das Haus.</label></div>
+          <div><input id="alibi_familie" type="checkbox"/><label for="alibi_familie"><span></span>Neben mir benutzen mehrere Familienmitglieder mein Netzwerk.</label></div>
+          <div><input id="alibi_wg" type="checkbox"/><label for="alibi_wg"><span></span>Neben mir benutzen mehrere Mitbewohner mein Netzwerk.</label></div>
+          <div><input id="alibi_nachbarn" type="checkbox"/><label for="alibi_nachbarn"><span></span>Neben mir benutzen mehrere Nachbarn mein Netzwerk.</label></div>
+          <div><input id="alibi_fluechtlingshilfe" type="checkbox"/><label for="alibi_fluechtlingshilfe"><span></span>Ich stelle mein Netzwerk einem Flüchtlingsheim zur Verfügung.</label></div>
           <p></p>
           <div class="hint">Achtung: Unrichtige Angaben zum Sachverhalt können Ihnen vor Gericht belastend ausgelegt werden. <b>Wählen Sie daher auf jeden Fall nur die Häkchen aus, die den Tatsachen entsprechen.</b></div>
           <div class="one-button">
diff --git a/style.css b/style.css
index 2662fc7..f05343d 100644
--- a/style.css
+++ b/style.css
@@ -335,13 +335,42 @@ select {
 }
 
 label {
-  display: block;
-  padding-left: 40px;
-  text-indent: -25px;
-}
-
-label input {
-  margin-right: 10px;
+  margin-bottom: 0.4em;
+}
+
+input[type=checkbox]:not(old) {
+  display   : none;
+  opacity   : 0;
+}
+
+input[type=checkbox]:not(old) + label {
+  display      : inline-block;
+  margin-left  : 0;
+  line-height  : 1.5em;
+  text-indent  : -2.0625em; /* Make 2nd line of label align, takes border width of tickbox into account */
+  padding-left : 2.0625em;
+}
+
+input[type=checkbox]:not(old) + label > span {
+  display          : inline-block;
+  width            : 1em;
+  height           : 1em;
+  margin           : 0.25em 1em 0.25em 0;
+  border           : 0.0625em solid white;
+  border-radius    : 25%;
+  vertical-align   : top;
+}
+
+input[type=checkbox]:not(old):checked + label > span:before {
+  content     : '✓';
+  display     : inline-block;
+  width       : 1em;
+  color       : white;
+  font-size   : 1.4em;
+  line-height : 1em;
+  text-align  : center;
+  font-weight : bold;
+  margin-left : 2.1em;
 }
 
 #wrapper.step1 .block-step1 .juice,