CSS :default Pseudo-Klasse
Die CSS :default Pseudo-Klasse dient zur Auswahl und Gestaltung von Standardelementen. Beschreibung und Beispiele.
Die :default-Pseudo-Klasse trifft auf das Standardelement in einer Gruppe zusammengehöriger Formularsteuerelemente zu — dasjenige, das der Browser abschicken (oder vorauswählen) würde, wenn der Nutzer nichts ändert. Ein typisches Beispiel ist der Radio-Button, der über das checked-Attribut von Anfang an ausgewählt ist.
Der wesentliche Unterschied besteht zwischen dem Standard- und dem aktuellen Zustand:
:defaulttrifft auf das Element zu, das beim Laden der Seite der Standard war, und behält diese Zuordnung auch dann bei, wenn der Nutzer etwas anderes auswählt.:checkedtrifft auf das Element zu, das aktuell ausgewählt ist, und wechselt mit der Nutzerinteraktion.
In einer Radio-Gruppe mit einem checked-Button zeigt :default immer auf den ursprünglichen Button, während :checked der Wahl des Nutzers folgt. Das macht :default nützlich, um „dies ist die empfohlene/ursprüngliche Option" zu kennzeichnen, ohne das Styling beim Klicken zu ändern.
Anwendungsbereich
:default trifft nur auf folgende Elemente zu:
<button>— der Standard-Absende-Button eines Formulars (der erste Submit-Button).<input>mittype="checkbox"odertype="radio"— ein Kontrollkästchen/Radio-Button, das standardmäßigcheckedist.<input>mittype="submit"odertype="image"— das Standard-Absendelement eines Formulars.<option>— eine Option mit demselected-Attribut.
Auf Texteingaben, <select> selbst oder andere Nicht-Formularelemente hat es keine Auswirkung.
Version
Syntax
:default {
/* CSS declarations */
}In der Regel kombiniert man es mit einem Element- oder Attributselektor, damit die Regel nur das gewünschte Steuerelement trifft, zum Beispiel input:default oder input[type="submit"]:default.
Beispiel mit einem standardmäßig markierten Radio-Button
Der mit checked markierte Radio-Button behält den blauen Schein, auch nachdem Nein ausgewählt wurde, da :default den Standard zum Ladezeitpunkt speichert.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input:default {
box-shadow: 0 0 2px 2px #1c87c9;
}
.example {
margin: 20px auto;
font-size: 20px;
}
</style>
</head>
<body>
<h2>:default selector example</h2>
<div class="example">
<p>Do you like coffee?</p>
<input type="radio" name="radios" id="ex1" checked />
<label for="ex1">Yes</label>
<br />
<input type="radio" name="radios" id="ex2" />
<label for="ex2">No</label>
</div>
</body>
</html>Beispiel mit dem Standard-Absende-Button
Der erste Submit-Button eines Formulars ist dessen Standard-Steuerelement — das Drücken von Enter in einem Feld aktiviert ihn. Hier hebt :default diesen ersten Button hervor, sodass Nutzer erkennen, welche Aktion standardmäßig ausgeführt wird.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
margin: 40px auto;
max-width: 700px;
}
input[type=submit] {
padding: .6em 1em;
font-size: 1em;
width: 100px;
margin-bottom: 1em;
}
input[type=submit]:default {
border: 4px dotted #8ebf42;
}
</style>
</head>
<body>
<h2>:default selector example</h2>
<div class="example">
<form action="#">
<input type="submit" value="Yes" />
<input type="submit" value="No" />
</form>
</div>
</body>
</html>Beispiel mit einer standardmäßig ausgewählten Option
Bei einem <select>-Menü trifft :default auf die <option> zu, die das selected-Attribut trägt — den Wert, der angezeigt wird, bevor der Nutzer das Dropdown öffnet.
option:default {
font-weight: bold;
color: #1c87c9;
}<label for="size">Size:</label>
<select id="size">
<option>Small</option>
<option selected>Medium</option>
<option>Large</option>
</select>Hier wird Medium gestylt, da es das selected-Attribut trägt — auch dann, wenn der Nutzer eine andere Größe wählt.
Hinweise und Besonderheiten
- Ein Standard pro Gruppe. Eine Radio-Gruppe sollte höchstens einen Standard haben; werden mehrere als
checkedmarkiert, gilt im DOM nur der letzte als Standard. :defaultist statisch,:checkedist dynamisch. Verwenden Sie:default, um die ursprüngliche/empfohlene Wahl zu kennzeichnen, und:checked, um auf die aktuelle Auswahl des Nutzers zu reagieren.- Submit-Buttons. Nur das erste Submit-Steuerelement eines Formulars ist das Standardelement, daher trifft
:defaultauf einen Button zu, selbst wenn mehrere vorhanden sind. - Kombinieren mit Zustands-Pseudo-Klassen wie
:disabled,:enabled,:requiredund:optional, um klare und vollständig gestylte Formulare zu erstellen.
Browser-Unterstützung
:default wird von allen modernen Browsern unterstützt, einschließlich Chrome, Firefox, Safari und Edge.