From a05817d40a7fab3c1ece32615dd316231742a0e1 Mon Sep 17 00:00:00 2001
From: erdgeist <erdgeist@bauklotz.fritz.box>
Date: Sat, 13 Aug 2016 19:23:43 +0200
Subject: Use our own style for checkboxes
---
index.html | 28 ++++++++++++++--------------
style.css | 43 ++++++++++++++++++++++++++++++++++++-------
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,
--
cgit v1.2.3