CSS3 :checked Pseudo-Klasse

Definition und Verwendung

CSS :checked Pseudo-Klassen werden verwendet, um jeden ausgewählten <input> oder <option> Elemente.

Dies gilt für <input type="radio">, <input type="checkbox"> und <select>-Elemente mit <option>.

Beispiel

Beispiel 1

Setzen Sie eine dünne rote Kontur für alle ausgewählten <input>-Elemente:

input:checked {
  outline: 1px solid red;
}

Versuchen Sie es selbst

Beispiel 2

Stellen Sie unterschiedliche Stile für Auswahlknöpfe, Kontrollkästchen und Optionen ein, wenn diese ausgewählt sind:

input[type="radio"]:checked {
  box-shadow: 0 0 5px 3px blue;
}
input[type="checkbox"]:checked {
  box-shadow: 0 0 5px 3px maroon;
}
option:checked {
  color: blue;
  background-color: pink;
}

Versuchen Sie es selbst

CSS-Syntax

:checked {
  css-Anweisungen;
}

Technische Details

Browser-Unterstützung

Die Zahlen in der Tabelle geben die erste Browser-Version an, die den Pseudo-Selektor vollständig unterstützt.