summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorerdgeist <erdgeist@bauklotz.fritz.box>2016-08-13 19:23:43 +0200
committererdgeist <erdgeist@bauklotz.fritz.box>2016-08-13 19:23:43 +0200
commita05817d40a7fab3c1ece32615dd316231742a0e1 (patch)
treefd7b762f1fdf4a197bb00431129e6d3c53211065
parent09a4d48b6bb93a4fd7096622dc246f2dccb6f181 (diff)
Use our own style for checkboxes
-rw-r--r--index.html28
-rw-r--r--style.css43
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 @@
160 160
161 <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> 161 <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>
162 162
163 <label><input id="alibi_urlaub" type="checkbox"/>Ich war nachweislich im Urlaub.</label> 163 <div><input id="alibi_urlaub" type="checkbox"/><label for="alibi_urlaub"><span></span>Ich war nachweislich im Urlaub.</label></div>
164 <label><input id="alibi_ausserhalb" type="checkbox"/>Ich war nachweislich beruflich außerhalb Deutschlands.</label> 164 <div><input id="alibi_ausserhalb" type="checkbox"/><label for="alibi_ausserhalb"><span></span>Ich war nachweislich beruflich außerhalb Deutschlands.</label></div>
165 <label><input id="alibi_nichtzuhause" type="checkbox"/>Ich war nachweislich nicht zuhause.</label> 165 <div><input id="alibi_nichtzuhause" type="checkbox"/><label for="alibi_nichtzuhause"><span></span>Ich war nachweislich nicht zuhause.</label></div>
166 <label><input id="alibi_arbeit" type="checkbox"/>Ich war nachweislich auf Arbeit.</label> 166 <div><input id="alibi_arbeit" type="checkbox"/><label for="alibi_arbeit"><span></span>Ich war nachweislich auf Arbeit.</label></div>
167 <label><input id="alibi_besuch" type="checkbox"/>Ich hatte Besuch. Dieser kann bezeugen, dass ich meinen Computer nicht benutzt habe.</label> 167 <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>
168 <label><input id="alibi_keinendgeraet" type="checkbox"/>Ich besitze keinen internetfähigen Computer.</label> 168 <div><input id="alibi_keinendgeraet" type="checkbox"/><label for="alibi_keinendgeraet"><span></span>Ich besitze keinen internetfähigen Computer.</label></div>
169 <label><input id="alibi_nichtwohnhaft" type="checkbox"/>Zum angegebenen Zeitpunkt habe ich an der ermittelten Adresse nicht (mehr) gewohnt.</label> 169 <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>
170 <div class="one-button"> 170 <div class="one-button">
171 <div class="button button-green" onclick="step4_done()">Weiter</div> 171 <div class="button button-green" onclick="step4_done()">Weiter</div>
172 </div> 172 </div>
@@ -179,13 +179,13 @@
179 </div> 179 </div>
180 <div class="juice"> 180 <div class="juice">
181 <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> 181 <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>
182 <label><input id="alibi_freifunk" type="checkbox"/>Ich betreibe ein Freifunk-Netzwerk.</label> 182 <div><input id="alibi_freifunk" type="checkbox"/><label for="alibi_freifunk"><span></span>Ich betreibe ein Freifunk-Netzwerk.</label></div>
183 <label><input id="alibi_tornode" type="checkbox"/>Ich betreibe nachweislich einen Tor-Exit-Node.</label> 183 <div><input id="alibi_tornode" type="checkbox"/><label for="alibi_tornode"><span></span>Ich betreibe nachweislich einen Tor-Exit-Node.</label></div>
184 <label><input id="alibi_offeneswifi" type="checkbox"/>Ich betreibe ein offenes Netzwerk für das Haus.</label> 184 <div><input id="alibi_offeneswifi" type="checkbox"/><label for="alibi_offeneswifi"><span></span>Ich betreibe ein offenes Netzwerk für das Haus.</label></div>
185 <label><input id="alibi_familie" type="checkbox"/>Neben mir benutzen mehrere Familienmitglieder mein Netzwerk.</label> 185 <div><input id="alibi_familie" type="checkbox"/><label for="alibi_familie"><span></span>Neben mir benutzen mehrere Familienmitglieder mein Netzwerk.</label></div>
186 <label><input id="alibi_wg" type="checkbox"/>Neben mir benutzen mehrere Mitbewohner mein Netzwerk.</label> 186 <div><input id="alibi_wg" type="checkbox"/><label for="alibi_wg"><span></span>Neben mir benutzen mehrere Mitbewohner mein Netzwerk.</label></div>
187 <label><input id="alibi_nachbarn" type="checkbox"/>Neben mir benutzen mehrere Nachbarn mein Netzwerk.</label> 187 <div><input id="alibi_nachbarn" type="checkbox"/><label for="alibi_nachbarn"><span></span>Neben mir benutzen mehrere Nachbarn mein Netzwerk.</label></div>
188 <label><input id="alibi_fluechtlingshilfe" type="checkbox"/>Ich stelle mein Netzwerk einem Flüchtlingsheim zur Verfügung.</label> 188 <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>
189 <p></p> 189 <p></p>
190 <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> 190 <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>
191 <div class="one-button"> 191 <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 {
335} 335}
336 336
337label { 337label {
338 display: block; 338 margin-bottom: 0.4em;
339 padding-left: 40px; 339}
340 text-indent: -25px; 340
341} 341input[type=checkbox]:not(old) {
342 342 display : none;
343label input { 343 opacity : 0;
344 margin-right: 10px; 344}
345
346input[type=checkbox]:not(old) + label {
347 display : inline-block;
348 margin-left : 0;
349 line-height : 1.5em;
350 text-indent : -2.0625em; /* Make 2nd line of label align, takes border width of tickbox into account */
351 padding-left : 2.0625em;
352}
353
354input[type=checkbox]:not(old) + label > span {
355 display : inline-block;
356 width : 1em;
357 height : 1em;
358 margin : 0.25em 1em 0.25em 0;
359 border : 0.0625em solid white;
360 border-radius : 25%;
361 vertical-align : top;
362}
363
364input[type=checkbox]:not(old):checked + label > span:before {
365 content : '✓';
366 display : inline-block;
367 width : 1em;
368 color : white;
369 font-size : 1.4em;
370 line-height : 1em;
371 text-align : center;
372 font-weight : bold;
373 margin-left : 2.1em;
345} 374}
346 375
347#wrapper.step1 .block-step1 .juice, 376#wrapper.step1 .block-step1 .juice,