CSS/Tutorials/Menüs und mehr mit dem Checkbox-Hack

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Hinweis

Der Checkbox-Hack verspricht eine Interaktivität ohne den Einsatz von JavaScript. Das dabei entstehende Stylesheet ist oft jedoch komplexer und weniger zugänglich als die nötigen Zeilen JavaScript. Zudem verstößt der Einsatz gegen die separation of concerns, die Trennung von Inhalt, Präsentation und Verhalten. Dieser Artikel und die Beispiele sollten daher als proof of concept angesehen werden.


Dynamische Elemente sind integrale Bestandteile fast jeder Webseite. Oft werden sie benötigt, um bestimmte Inhalte der Seite, z.B. ausufernde Navigationsmenüs, hinter einem oder mehreren weiteren Klicks zu verstecken. Nun ist es aber so, dass JavaScript, das für dynamische Elemente wie gemacht ist, für einige Benutzer versagt: Sei es, dass sie JavaScript absichtlich deaktiviert haben (z.B. um Werbung oder aufdringliche Animationen auszublenden) oder, dass sie mit Software mit mangelhafter JavaScript-Unterstützung surfen (z.B. mit einem veralteten Mobil-Browser). Da es sich bei den genannten Seitenelementen um grundlegende Dinge handelt, deren Versagen womöglich die gesamte Seite unbenutzbar macht, möchte man an dieser Stelle eventuell auf JavaScript so weit wie möglich verzichten - oder JavaScript ganz gezielt als progressive enhancement einsetzen.

Es gibt mehrere Ansätze, mit denen man versucht, dynamische Navigationsmenüs und Ähnliches rein mit CSS zu realisieren. Diese Ansätze (z.B. unter Ausnutzung der Pseudoklasse active) sind für ihren Anwendungsfall oft auch ausreichend und liefern befriedigende Ergebnisse. Versucht man aber kompliziertere Dialoge und verschachtelte Menüs zu gestalten stößt man schnell an eine Grenze: Es ist mittels CSS für gewöhnlich nicht möglich, einen bestimmten Zustand fest umzustellen. Realisiert man ein aufklappbares Menü mit active oder focus, so kann man die Menüelemente darin nicht wieder per active aufklappbar machen, da sonst das äußerste Element wieder seinen Fokus verliert und das gesamte Menü verschwindet. hover ist an dieser Stelle schon eher einsetzbar, seit der massiven Verbreitung von Smartphones und mobilem Internet allerdings für die meisten Nutzer unerreichbar.

An dieser Stelle ist es möglich, den Checkbox-Hack zu nutzen, um der CSS-Formatierung durch eine HTML-Checkbox ein Werkzeug an die Hand zu geben, das in seinem Zustand für die Dauer des Seitenbesuchs persistent ist. Wir wollen in diesem Artikel mehrere konkrete Beispiele vorstellen, die den Checkbox-Hack nutzen um damit verschiedenste dynamische Seitenelemente zu realisieren - von verschachtelten Menüs über aufklappbare Boxen zu Boxen mit Registerkarten.

Hinweis

Trotz der Bemerkungen im Einleitungstext kann beim einen oder anderen Beispiel ein Zusatzfeature in JavaScript umgesetzt worden sein. Die JavaScript-Teile sind in dem Fall aber nicht vital für grundlegende Funktionalität, sondern sollen nur den ein oder anderen selteneren Anwendungsfall abrunden. Insbesondere sind alle Beispiele auch ohne JavaScript voll benutzbar.
Beachten Sie: Einige Webkit-Browser mit älterer Engine sind von einem Bug betroffen, der ein dynamisches Umschalten beim Zustandswechsel der Pseudoklasse :checked unterdrückt. Es handelt sich dabei insbesondere um nicht-aktualisierbare Mobilbrowser (z.B. Versionen des Android-Systembrowser bis Android 4.x; bestätigt mindestens bis 4.4.2). Für diese Browser gibt es einen Javascript-gestützten Bugfix, der ohne Einschränkungen in jede Anwendung eingebaut werden kann. Die zu den Codebeispielen verlinkten Live-Beispiele in diesem Artikel beinhalten diesen Bugfix, auch wenn der Code des Bugfix in den Codebeispielen nicht mit aufgeführt ist.

Menüs mit dem Checkbox-Hack[Bearbeiten]

Verschachtelte Navigation mit klickbaren Kategorien[Bearbeiten]

Akkordeonmenüs[Bearbeiten]

Beispiel: Akkordeon-Menü mit dem Checkbox-Hack ansehen …
<nav>
  <ul>
    <li>
      <input type="radio" name="navi_1" id="navi_1_1" class="hackbox" checked>
      <label for="navi_1_1"></label><a>Link Haupt</a>
      <ul>
        <li>
          <input type="radio" name="navi_2" id="navi_2_1" class="hackbox" checked>
          <label for="navi_2_1"></label><a>Link Sub</a>
          <ul>
            <li>
              <input type="radio" name="navi_3" id="navi_3_1" class="hackbox">
              <label for="navi_3_1"></label><a>Link Sub-Sub</a>
            </li>
            <li>
              <input type="radio" name="navi_3" id="navi_3_2" class="hackbox">
              <label for="navi_3_2"></label><a>Link Sub-Sub</a>
            </li>
            <li>
              <input type="radio" name="navi_3" id="navi_3_3" class="hackbox">
              <label for="navi_3_3"></label><a>Link Sub-Sub</a>
            </li>
      
          </ul>
        </li>
        <li>
          <input type="radio" name="navi_2" id="navi_2_2" class="hackbox"><label for="navi_2_2"></label><a>Link Sub</a>
          <ul>
            <li>
              <input type="radio" name="navi_3" id="navi_3_4" class="hackbox"><label for="navi_3_4"></label><a>Link Sub-Sub</a>
            </li>
            <li>
              <input type="radio" name="navi_3" id="navi_3_5" class="hackbox"><label for="navi_3_5"></label><a>Link Sub-Sub</a>
            </li>
            <li>
              <input type="radio" name="navi_3" id="navi_3_6" class="hackbox"><label for="navi_3_6"></label><a>Link Sub-Sub</a>
            </li>
          </ul>
        </li> 
        <li>
          <input type="radio" name="navi_2" id="navi_2_3" class="hackbox"><label for="navi_2_3"></label><a>Link Sub</a>
          <ul>
            <li>
              <input type="radio" name="navi_3" id="navi_3_7" class="hackbox"><label for="navi_3_7"></label><a>Link Sub-Sub</a>
            </li>
            <li>
              <input type="radio" name="navi_3" id="navi_3_8" class="hackbox"><label for="navi_3_8"></label><a>Link Sub-Sub</a>
            </li>
            <li>
              <input type="radio" name="navi_3" id="navi_3_9" class="hackbox"><label for="navi_3_9"></label><a>Link Sub-Sub</a>
            </li>
          </ul>
        </li>  
      </ul>    
    </li>
    <li>
      <input type="radio" name="navi_1" id="navi_1_2" class="hackbox"><label for="navi_1_2"></label><a>Link Haupt</a>
      <ul>
        <li>
          <input type="radio" name="navi_2" id="navi_2_4" class="hackbox"><label for="navi_2_4"></label><a>Link Sub</a>
          <ul>
            <li>
              <input type="radio" name="navi_3" id="navi_3_10" class="hackbox"><label for="navi_3_10"></label><a>Link Sub-Sub</a>
            </li>
            <li>
              <input type="radio" name="navi_3" id="navi_3_11" class="hackbox"><label for="navi_3_11"></label><a>Link Sub-Sub</a>
            </li>
            <li>
              <input type="radio" name="navi_3" id="navi_3_12" class="hackbox"><label for="navi_3_12"></label><a>Link Sub-Sub</a>
            </li>
      
          </ul>
        </li>
        <li>
          <input type="radio" name="navi_2" id="navi_2_5" class="hackbox"><label for="navi_2_5"></label><a>Link Sub</a>
          <ul>
            <li>
              <input type="radio" name="navi_3" id="navi_3_13" class="hackbox"><label for="navi_3_13"></label><a>Link Sub-Sub</a>
            </li>
            <li>
              <input type="radio" name="navi_3" id="navi_3_14" class="hackbox"><label for="navi_3_14"></label><a>Link Sub-Sub</a>
            </li>
            <li>
              <input type="radio" name="navi_3" id="navi_3_15" class="hackbox"><label for="navi_3_15"></label><a>Link Sub-Sub</a>
            </li>
          </ul>
        </li> 
        <li>
          <input type="radio" name="navi_2" id="navi_2_6" class="hackbox"><label for="navi_2_6"></label><a>Link Sub</a>
          <ul>
            <li>
              <input type="radio" name="navi_3" id="navi_3_16" class="hackbox"><label for="navi_3_16"></label><a>Link Sub-Sub</a>
            </li>
            <li>
              <input type="radio" name="navi_3" id="navi_3_17" class="hackbox"><label for="navi_3_17"></label><a>Link Sub-Sub</a>
            </li>
            <li>
              <input type="radio" name="navi_3" id="navi_3_18" class="hackbox"><label for="navi_3_18"></label><a>Link Sub-Sub</a>
            </li>
          </ul>
        </li>  
      </ul>    
    </li>
    <li>
      <input type="radio" name="navi_1" id="navi_1_3" class="hackbox"><label for="navi_1_3"></label><a>Link Haupt</a>
      <ul>
        <li>
          <input type="radio" name="navi_2" id="navi_2_7" class="hackbox"><label for="navi_2_7"></label><a>Link Sub</a>
          <ul>
            <li>
              <input type="radio" name="navi_3" id="navi_3_19" class="hackbox"><label for="navi_3_19"></label><a>Link Sub-Sub</a>
            </li>
            <li>
              <input type="radio" name="navi_3" id="navi_3_20" class="hackbox"><label for="navi_3_20"></label><a>Link Sub-Sub</a>
            </li>
            <li>
              <input type="radio" name="navi_3" id="navi_3_21" class="hackbox"><label for="navi_3_21"></label><a>Link Sub-Sub</a>
            </li>
      
          </ul>
        </li>
        <li>
          <input type="radio" name="navi_2" id="navi_2_8" class="hackbox"><label for="navi_2_8"></label><a>Link Sub</a>
          <ul>
            <li>
              <input type="radio" name="navi_3" id="navi_3_22" class="hackbox"><label for="navi_3_22"></label><a>Link Sub-Sub</a>
            </li>
            <li>
              <input type="radio" name="navi_3" id="navi_3_23" class="hackbox"><label for="navi_3_23"></label><a>Link Sub-Sub</a>
            </li>
            <li>
              <input type="radio" name="navi_3" id="navi_3_24" class="hackbox"><label for="navi_3_24"></label><a>Link Sub-Sub</a>
            </li>
          </ul>
        </li> 
        <li>
          <input type="radio" name="navi_2" id="navi_2_9" class="hackbox"><label for="navi_2_9"></label><a>Link Sub</a>
          <ul>
            <li>
              <input type="radio" name="navi_3" id="navi_3_25" class="hackbox"><label for="navi_3_25"></label><a>Link Sub-Sub</a>
            </li>
            <li>
              <input type="radio" name="navi_3" id="navi_3_26" class="hackbox"><label for="navi_3_26"></label><a>Link Sub-Sub</a>
            </li>
            <li>
              <input type="radio" name="navi_3" id="navi_3_27" class="hackbox"><label for="navi_3_27"></label><a>Link Sub-Sub</a>
            </li>
          </ul>
        </li>  
      </ul>    
    </li>
  </ul>
</nav>
Dieses Beispiel wurde als Antwort auf den Thread Problem mit Menü ... zusammengeschraubt.

Dynamische Boxen mit dem Checkbox-Hack[Bearbeiten]

Boxen mit Radiobuttons in den Vordergrund tauschen[Bearbeiten]

display ist nicht die einzige Möglichkeit, die Sichtbarkeit eines Elements umzuschalten. Gerade wenn Elemente nicht restlos verschwinden, sondern nur optisch durch andere Elemente ersetzt werden sollen, bieten sich auch andere CSS-Eigenschaften an. Das folgende Beispiel benutzt den z-index übereinander positionierter Elemente im Zusammenspiel mit Radiobuttons, um das gerade aktuelle sichtbar zu machen und die jeweils Anderen zu verstecken. Diese Möglichkeit lässt sich auch einwandfrei innerhalb von Formular-Umgebungen nutzen, um Radiobuttons einmal etwas anders darzustellen, da die versteckten Radiobuttons für das Formular ja nach wie vor abrufbar sind. Um zu verhindern, dass der Klick dem aktuell obersten Element zugeordnet wird (dann würde keine Veränderung eintreten) wird hier pointer-events genutzt.

Beispiel ansehen …
<fieldset>
    <input id="tn-vielleicht" type="radio" name="teilnahme" value="0" checked="checked">
    <label for="tn-vielleicht">vielleicht</label>
    <input id="tn-nein" type="radio" name="teilnahme" value="-1">
    <label for="tn-nein">nein</label>
    <input id="tn-ja" type="radio" name="teilnahme" value="1">
    <label for="tn-ja">ja</label>
</fieldset>
label{
    position: absolute;
    display: block;
    left: 0;
    top: 0;
    width: 5em;
    padding: .5em;
    border: 2px solid #c32e04;
    text-align: center;
}
:checked + label {
    z-index: 10;
    pointer-events: none;
}
:checked + label + input + label {
    pointer-events: none;
}
input {
    display: none;
}
Das Beispiel zeigt einen Button, der 3 Status haben kann. Technisch handelt es sich um eine Gruppe von drei Radiobuttons. Mithilfe absoluter Positionierung werden die drei label-Elemente übereinander positioniert. Dasjenige Label, was zum ausgewählten Radiobutton gehört, wird durch die Angabe eines z-index sichtbar, für pointer-events werden sowohl dieses als auch das im Quelltext folgende label-Element unempfänglich gemacht.

"Mehr lesen" von Texten[Bearbeiten]

Das Problem ist bekannt: Man möchte auf seiner Startseite verschiedene Texte präsentieren, kann diese aber nicht im Volltext abdrucken, weil ansonsten die Übersichtlichkeit und der Überblick über die vielen Texte leidet. Außerdem weiß man ja nie so recht, ob der Besucher der Seite an diesem einen Text überhaupt speziell interessiert ist. Eine mögliche Lösung ist es dann, nur eine Art Teaser, einen Ausschnitt des Textes, beispielsweise den Anfang zusammen mit der Überschrift, anzuzeigen, und dem Nutzer per Klick auf eine entsprechende Schaltfläche die Möglichkeit zu geben, den Volltext abzurufen. Der kann über JavaScript eingeblendet werden, oder die Schaltfläche kann ein Link auf eine Unterseite sein - oder man verzichtet auf JavaScript beziehungsweise einen weiteren Seitenaufruf und realisiert das Aufklappen mit dem Checkbox-Hack.

Beispiel: "Mehr lesen" mit dem Checkbox-Hack ansehen …
<h2>Lesbarkeit</h2>

<p>Lieber Kunde und Leser, falls Sie keine Probleme haben, [...weiterer Blindtext...] par excellence.<br>

  <input type="checkbox" class="hackbox mehr_lesen" id="mehr_lesen_lesbarkeit">

  <span class="volltext">Er hat diesen Copyblock weder [...weiterer Blindtext...] Arbeit haben.<br></span>

  <label class="mehr_lesen" for="mehr_lesen_lesbarkeit"> lesen...</label>
</p>
/* allgemeines */
input.hackbox {
  display:none;
}
 
/* default-Zustand */
span.volltext {
  display:none;
}
 
label.mehr_lesen {
  color:#0091D2;
}
 
label.mehr_lesen::before {
  content:" mehr";
  color:#0091D2;
}
 
/* bei gesetztem Haken */
input.mehr_lesen:checked ~ span.volltext {
  display:inline;
} 
 
input.mehr_lesen:checked ~ label.mehr_lesen::before {
  content:" weniger";
  color:#0091D2;
}
Im Default-Zustand ist der Volltext versteckt. Bei Klick auf das label wird der Haken in der Checkbox gesetzt, so dass die letzteren CSS-Regeln greifen - der Volltext wird angezeigt und der mit before generierte content vor dem label wird von " mehr" zu " weniger".
Beachten Sie, dass die Checkbox im HTML-Code vor den Elementen stehen muss, die sie kontrolliert.
Statt dem Geschwisterselektor wäre für die Kontrolle über das span-Element auch der Nachbarselektor eine denkbare Wahl gewesen.

Boxen mit Registerkarten[Bearbeiten]

Obwohl uns diese Darstellungsart im Internet häufig begegnet ist es bisher (Stand November 2015) nicht-trivial, einen Bereich mit Registerkarten (bekannter als Tabs) ausschließlich mit CSS zu gestalten. Auch der Checkbox-Hack stößt hier an seine Grenzen, vor allen Dingen, wenn man sinnvolles Markup zugrunde legt.

Empfehlung: Sie sollten die in diesem Unterkapitel vorgestellte Technik lediglich als Inspiration betrachten. Solange es für einen ordentlich funktionierenden Tab-Bereich mit reinem CSS notwendig ist, das Markup an die Darstellung anzupassen, ist eine JavaScript-gestützte Lösung für Tab-Bereiche die bessere und sicherere Wahl, die zudem mit deutlich weniger redundantem Markup, also deutlich weniger Wartungsaufwand auskommt.

In einem sinnvollen Markup nimmt die Beschriftung des Tabs die Rolle einer Überschrift ein. Um bei einer reinen CSS-Implementierung den aktuell aktiven Tab hervorheben zu können ist es aber (da Kombinatoren lediglich für die Geschwister- oder Kindebene zur Verfügung stehen) unumgänglich, dass die Beschriftung des Tabs ein Kindelement des aktiven Tabs ist.

Wir benötigen also eine Liste der Tab-Beschriftungen, quasi eine Navigation durch den Tab-Bereich, die (bis auf eine Markierung für den aktuell aktiven Tab) in jedem Tabinhalt identisch vorkommen muss. Um den Checkbox-Hack anzuwenden benötigen wir zudem vor jedem Tabinhalt einen (unsichtbaren) Radio-Button. Wir erhalten also folgendes Markup:

Beispiel ansehen …
<section class="tabbing" id="tbg_blindtext">
  <input type="radio" id="tbg_blindtext_0" name="tbg_blindtext" class="hackbox" checked>
  <div class="tabcontent">    
    <ul class="tabs">
      <li><label for="tbg_blindtext_0" class="tab_active">Blindtext</label></li>
      <li><label for="tbg_blindtext_1">Franz und das Taxi</label></li>
      <li><label for="tbg_blindtext_2">Lorem Ipsum</label></li>
      <li><label for="tbg_blindtext_3">Kafka bunt gemischt</label></li>
    </ul>
    <!-- Tabinhalt -->
  </div>  
  <input type="radio" id="tbg_blindtext_1" name="tbg_blindtext" class="hackbox">
  <div class="tabcontent">
    <ul class="tabs">
      <li><label for="tbg_blindtext_0">Blindtext</label></li>
      <li><label for="tbg_blindtext_1" class="tab_active">Franz und das Taxi</label></li>
      <li><label for="tbg_blindtext_2">Lorem Ipsum</label></li>
      <li><label for="tbg_blindtext_3">Kafka bunt gemischt</label></li>
    </ul>
    <!-- Tabinhalt -->
  </div>
  <input type="radio" id="tbg_blindtext_2" name="tbg_blindtext" class="hackbox">
  <div class="tabcontent">
    <ul class="tabs">
      <li><label for="tbg_blindtext_0">Blindtext</label></li>
      <li><label for="tbg_blindtext_1">Franz und das Taxi</label></li>
      <li><label for="tbg_blindtext_2" class="tab_active">Lorem Ipsum</label></li>
      <li><label for="tbg_blindtext_3">Kafka bunt gemischt</label></li>
    </ul>
    <!-- Tabinhalt -->
  </div>
  <input type="radio" id="tbg_blindtext_3" name="tbg_blindtext" class="hackbox">
  <div class="tabcontent">
    <ul class="tabs">
      <li><label for="tbg_blindtext_0">Blindtext</label></li>
      <li><label for="tbg_blindtext_1">Franz und das Taxi</label></li>
      <li><label for="tbg_blindtext_2">Lorem Ipsum</label></li>
      <li><label for="tbg_blindtext_3" class="tab_active">Kafka bunt gemischt</label></li>
    </ul>
    <!-- Tabinhalt -->
  </div>
</section>
Die CSS-Regeln bestehen einerseits aus den üblichen Mechanismen, um nach dem Prinzip des Checkbox-Hack nicht-aktive Seitenbereiche von der Anzeige auszuschließen, und andererseits aus Regeln zur Formatierung der Elemente im Stil eines Tab-Bereichs. Die optische Zusammengehörigkeit zwischen aktiver Tabbeschriftung und dem Tabinhalt wird dadurch erreicht, dass die leicht nach unten versetzte Tabbeschriftung einen Rahmen in der gemeinsamen Hintergrundfarbe von Tab und Tabinhalt bekommt.
/* Hackboxen verstecken */
input.hackbox {
  display:none;
}

/* Den Tab-Bereich formatieren */
.tabbing {
  position:relative;
  margin-top:2em;
}

/* Der Inhalt der Tab-Boxen ist ausgeblendet... */
.tabbing > .tabcontent {
  display:none;
}

/* ...außer, wenn die zugehörige Hackbox angewählt ist */
.tabbing > .hackbox:checked + .tabcontent {
  display:block;
}

/* Der Inhalt der Tabboxen ist im Vergleich zu den Tabs im Hintergrund */
.tabcontent {
  border:1px solid black;
  padding:1em;
  z-index:1;
  background-color:white;
}

/* Die Tableiste wird oberhalb des Tabbereich und im Vordergrund dargestellt */
.tabs {
  margin:0;
  padding:0;
  z-index:2;
  position:absolute;
  bottom:100%;
  left:0px;
  width:100%;
}

.tabs li {
  display:inline-block;
  margin:0;
  padding:0;
}

.tabs>li>label {
  display:inline-block;
  padding:0 1em;
  border-top:1px solid black;
  border-right:1px solid black;
  border-left:1px solid black;
  border-radius:1ex 1ex 0 0;
  margin:0 0 0 0;
  height:1.5em;
  position:relative;
  top:1px;
	  background-color:white;
}

/* Der aktive Tab überdeckt mit seinem unteren Rahmen den Rahmen der Tab-Box */
.tabs>li>label.tab_active {
  border-bottom:1px solid white;
}
Beachten Sie, dass das Beispiel aufgrund der Platzierung der Tabbeschriftungen im Markup in dieser Form nicht bzw. nur eingeschränkt responsiv ist und schon deshalb so nicht praktisch verwendet werden sollte.

Bugfix für veraltete Webkit-Browser[Bearbeiten]

In veralteten Versionen der Browserengine Webkit kommt es zu einem Fehler, bei dem die Darstellung der durch den Checkbox-Hack beeinflussten Elemente bei einer Zustandsänderung der Checkbox nicht aktualisiert wird (bekannt als WebKit Adjacent/General Sibling & Pseudo Class Bug). Das führt dazu, dass insbesondere auf veralteten Mobilbrowsern de facto die Anwendung des Checkbox-Hack ohne Hilfsmittel unmöglich ist.

Glücklicherweise ist es möglich, die Aktualisierung der Darstellung manuell anzustoßen. Dazu wird der body mit einer do nothing-Animation versehen. Da Animationen die Systemressourcen dauerhaft belasten und damit insbesondere auf Mobilgeräten zu einem unnötigen, sehr viel höheren Energieverbrauch führen können, verzichten wir darauf, die Animation dauerhaft abspielen zu lassen und aktivieren sie mit Hilfe von JavaScript ausschließlich, wenn tatsächlich eine geänderte Hackbox-Checkbox vorliegt. Da eine Deaktivierung von JavaScript bei den betroffenen Browsern mit Standardmethoden nicht möglich ist, bleiben die Vorteile des Checkbox-Hack bei dieser Methode erhalten.

Beispiel
/* CSS-Regel zur Definition der Animation */
@-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } }
window.addEventListener("load",function(){
  if (document.body.style.WebkitAnimation != undefined) {
    var elms = document.getElementsByTagName("input");
    for (var i = 0; i < elms.length; i++) {
        if (elms[i].className.search(/\bhackbox\b/) >= 0) {
           elms[i].addEventListener("change",function() {
             document.body.style.WebkitAnimation = "bugfix infinite 1s";
             window.setTimeout(function(){ document.body.style.WebkitAnimation = ""; },1500);
           });
        }
     }
  }
});
Nach erfolgreichem Laden des window wird allen input-Elementen mit Klasse hackbox ein event-listener übergeben, der die Bugfix-Animation bei jeder Änderung des Zustands für eineinhalb Sekunden (bzw. eine halbe Sekunde, wenn man die Startverzögerung beachtet) auf dem body abspielt.
Beachten Sie: In der hier gezeigten Beispiel-Implementierung werden (um möglicherweise unnötige Komplexität zu vermeiden) nur die Elemente erfasst, die schon beim Laden der Seite vorhanden sind. Eventuelle weitere, dynamisch mit JavaScript hinzugefügte hackboxen müssen noch manuell mit dem oben gezeigten event-listener versehen werden. Weiterhin muss mit dem obigen Code jedes input-Element, das in einen Checkbox-Hack involviert ist, der Klasse hackbox angehören.


Weblinks[Bearbeiten]

Layout ändern per Checkbox-Hack