W3docs
de
Anmelden

CSS :checked Pseudo-Klasse

Die :checked CSS-Pseudo-Klasse wählt und stylt <input>- und <option>-Elemente. Erklärung und Beispiele.

Die :checked-Pseudo-Klasse wählt Elemente aus, die sich aktuell im aktivierten (ausgewählten) Zustand befinden. Sie gilt nur für drei Arten von Elementen:

  • <input type="checkbox">, wenn die Checkbox angehakt ist,
  • <input type="radio">, wenn der Radio-Button ausgewählt ist,
  • <option>-Elemente (innerhalb eines <select> oder <datalist>), die aktuell gewählt sind.

Da diese Steuerelemente vom Benutzer ein- und ausgeschaltet werden, ist :checked eine dynamische Pseudo-Klasse: Die Stile, die Sie darunter definieren, gelten nur, wenn das Steuerelement eingeschaltet ist, und der Browser wertet sie erneut aus, sobald der Benutzer klickt. Damit ist sie die Grundlage für reine CSS-Interaktivität — Sie können Umschalter, Akkordeons, Tabs und benutzerdefinierte Formularelemente ohne eine einzige Zeile JavaScript erstellen.

Diese Seite erklärt, worauf :checked zutrifft, wie man es mit Geschwister-Kombinatoren einsetzt, um andere Elemente zu stylen (in den meisten realen Anwendungsfällen), zeigt drei ausführbare Beispiele und nennt die Barrierefreiheitsaspekte, die zu beachten sind.

Wie :checked mit Kombinatoren funktioniert

:checked allein kann nur das Steuerelement selbst stylen, und native Checkboxen/Radio-Buttons sind schwer umzugestalten. Die eigentliche Stärke liegt in der Kombination mit einem Kombinator, sodass ein aktiviertes Input ein benachbartes Element stylt:

  • Direktes Geschwisterelement (+) — input:checked + label stylt das Label, das direkt nach einem aktivierten Input folgt.
  • Allgemeines Geschwisterelement (~) — input:checked ~ .panel stylt jedes spätere Geschwisterelement und ermöglicht es einer Checkbox, einen ganzen Bereich sichtbar zu machen.

Ein gängiges Muster ist es, das eigentliche Input visuell zu verstecken und den Benutzer auf ein damit verknüpftes <label> klicken zu lassen (ein Klick auf ein Label schaltet das zugehörige Steuerelement um). Die Checkbox bleibt im Barrierefreiheitsbaum erhalten, aber Sie steuern die Darstellung über :checked und das Label.

Version

HTML Living Standard

HTML5

Selectors Level 4

Syntax

CSS :checked Syntax-Beispiel

:checked {
  css declarations;
}

Im folgenden Beispiel können Sie die Checkbox aktivieren, um zu sehen, wie es funktioniert.

Beispiel des :checked-Selektors mit dem <div>-Tag:

CSS :checked Code-Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        margin: 10px;
        font-size: 20px;
      }
      input:checked + label {
        color: #000;
      }
      input[type="radio"]:checked {
        box-shadow: 0 0 0 4px #8ebf42;
      }
        /* Checkbox element, when checked */
        input[type="checkbox"]:checked {
        box-shadow: 0 0 0 3px #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>:checked selector example</h2>
    <div>
      <input type="radio" name="my-input" id="yes" />
      <label for="yes">Yes</label>
      <input type="radio" name="my-input" id="no" />
      <label for="no">No</label>
    </div>
    <div>
      <input type="checkbox" name="my-checkbox" id="opt-in" />
      <label for="opt-in">Check!</label>
    </div>
  </body>
</html>
Probier es selbst »

Beispiel des :checked-Selektors mit den Tags <table>, <tr>, <th>, <td>:

CSS :checked Klick-Simulation Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table,tr,th,td {
        border: 1px solid #ccc;
        text-align: center;
        border-collapse: collapse;
        padding: 8px;
      }
      #toggle {
        display: none;
      }
      .expandable {
        visibility: collapse;
        background: #1c87c9;
      }
      #btn {
        display: inline-block;
        margin-top: 15px;
        padding: 10px 20px;
        background-color: #8ebf42;
        color: #fff;
        cursor: pointer;
        border-radius: 3px;
      }
      #toggle:checked ~ * .expandable {
        visibility: visible;
      }
      #toggle:checked ~ #btn {
        background-color: #ccc;
      }
    </style>
  </head>
  <body>
    <h2>:checked selector example</h2>
    <input type="checkbox" id="toggle" />
    <table>
      <thead>
        <tr>
          <th>Column 1</th>
          <th>Column 2</th>
          <th>Column 3</th>
        </tr>
      </thead>
      <tbody>
        <tr class="expandable">
          <td>[more text]</td>
          <td>[more text]</td>
          <td>[more text]</td>
        </tr>
        <tr>
          <td>[text]</td>
          <td>[text]</td>
          <td>[text]</td>
        </tr>
        <tr class="expandable">
          <td>[more text]</td>
          <td>[more text]</td>
          <td>[more text]</td>
        </tr>
        <tr>
          <td>[text]</td>
          <td>[text]</td>
          <td>[text]</td>
        </tr>
        <tr class="expandable">
          <td>[more text]</td>
          <td>[more text]</td>
          <td>[more text]</td>
        </tr>
      </tbody>
    </table>
    <label for="toggle" id="btn">Click here!</label>
  </body>
</html>
Probier es selbst »

Beispiel des :checked-Selektors:

Beispiel der CSS :checked Pseudo-Klasse:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      input[type=checkbox] {
        vertical-align:middle;
      }
      input[type=checkbox] + label {
        color: #999999;
        font-style: normal;
      } 
      input[type=checkbox]:checked + label {
        color: #8ebf42;
        font-style: italic;
        font-weight:bold;
      } 
    </style>
  </head>
  <body>
    <h2>:checked selector example</h2>
    <form>
      <input type="checkbox" id="css" name="css" /> 
      <label for="css">Here is CSS example.</label> 
    </form>
  </body>
</html>
Probier es selbst »

Die :checked-Pseudo-Klasse kann also verwendet werden, um Formulare interaktiver zu gestalten und Widgets mit versteckten Inputs und deren sichtbaren Labels zu erstellen.

Häufige Anwendungsfälle

  • Benutzerdefinierte Checkboxen und Radio-Buttons. Verstecken Sie das native Steuerelement mit appearance: none (oder durch Zuschneiden) und zeichnen Sie einen eigenen Indikator, der auf input:checked reagiert.
  • Umschalter / "Mehr anzeigen"-Bereiche. Eine versteckte Checkbox zusammen mit :checked ~ .panel { display: block } klappt Inhalte auf oder zu (wie im obigen Tabellenbeispiel) — ganz ohne JavaScript.
  • Reine CSS-Tabs und Akkordeons. Gruppieren Sie Radio-Buttons nach name und verwenden Sie dann input:checked ~ ..., um den passenden Bereich anzuzeigen.
  • <option>-Zustand stylen. option:checked ermöglicht es, das aktuell ausgewählte Element in einem <select> hervorzuheben.

Barrierefreiheit und Fallstricke

  • Das Input fokussierbar halten. Verwenden Sie appearance: none, Zuschneiden oder opacity: 0 statt display: none, wenn Tastaturbenutzer das Steuerelement noch erreichen und umschalten sollen. display: none entfernt das Input vollständig aus der Tab-Reihenfolge.
  • Stets ein Steuerelement mit einem <label> verknüpfen. Ein korrekt verknüpftes <label> (über for/id) macht den sichtbaren Text zu einem Klick- und Screenreader-Ziel für das Steuerelement.
  • Das gestylte Element muss ein Geschwisterelement sein, das nach dem Input kommt. CSS-Geschwister-Kombinatoren (+, ~) schauen nur vorwärts; platzieren Sie daher das Input vor den Elementen, die es steuert, im HTML.
  • :checked spiegelt den aktuellen Zustand wider, nicht das HTML-Attribut. Selbst ein Element ohne das checked-Attribut erfüllt :checked, sobald der Benutzer es auswählt, und eines mit dem Attribut hört auf, es zu erfüllen, sobald der Benutzer es abwählt.

Verwandte Pseudo-Klassen

:checked wird häufig mit anderen Zustands- und Formular-Pseudo-Klassen kombiniert:

  • :disabled — Steuerelemente stylen, mit denen der Benutzer nicht interagieren kann.
  • :required — Felder stylen, die ausgefüllt werden müssen.
  • :focus und :hover — Interaktionszustände stylen, nützlich für benutzerdefinierte Steuerelemente.
  • :not() — eine Auswahl umkehren, z. B. input:not(:checked).

Die vollständige Liste der CSS-Selektoren bietet weitere Möglichkeiten, Elemente anzusprechen.

Übung

Übung
Was ist die Funktion der ':checked'-Pseudo-Klasse in CSS?
Was ist die Funktion der ':checked'-Pseudo-Klasse in CSS?
Was this page helpful?