:default | CSS-Tricks

Der Pseudo-Selektor :default wählt das Standardelement in einer Gruppe zugehöriger Elemente aus, z. B. den Radiobutton in einer Gruppe von Buttons, der standardmäßig ausgewählt ist, auch wenn der Benutzer einen anderen Wert ausgewählt hat.

input[type="radio"]:default + label:after {
   content: ' (default)';
   color: #999;
   font-style: italic;
}

Das obige CSS zielt auf das Label ab, das unmittelbar auf den standardmäßig ausgewählten Radiobutton in einer Gruppe von Radiobuttons folgt.

red
grün
blau

Dem grünen Radiobutton wird in unterstützenden Browsern in grauer, kursiver Schrift "(Standard)" folgen.

red
grün
blau

Beispiele hierfür sind der Standard-Submit-Button in einer Gruppe von Buttons, die Standardoption aus einem Popup-Menü, der Radiobutton, bei dem das Attribut checked im HTML gesetzt ist (wie in unterstützenden Browsern zu sehen), und die standardmäßig aktivierten Checkboxen.

Weitere Ressourcen

Browser-Unterstützung

Verschiedene Browser bieten unterschiedliche Unterstützungsstufen. Firefox bietet volle Unterstützung. Webkit-Browser unterstützen :default bei Buttons, aber nicht bei Radiobuttons oder Checkboxen, und Opera ist umgekehrt und unterstützt es bei Radiobuttons und Checkboxen, aber nicht beim Submit.

Opera unterstützt :default bei Checkboxen und Radiobuttons.
Webkit-Browser, einschließlich Chrome und Safari, unterstützen :default beim Submit-Button.
Firefox unterstützt :default bei Checkbox-, Radio- UND Submit-Input-Typen.
Internet Explorer unterstützt :default nicht bei Checkbox-, Radio- oder Submit-Input-Typen.

Chrome	Safari	Firefox	Opera	IE	Android	iOS
10	5	4	10	none	none	5

Kommentare

amin

# 4. Juni 2014

Ich benutze die neueste Version der Browser. Es scheint, dass die :default-Pseudo nur in Firefox funktioniert.

Antworten

Jyoti Puri

# 27. November 2014

Hey,

Das obige Beispiel für :default funktioniert nicht einmal in meinem Chrome.

Antworten

Chris Cuilla

# 19. August 2016

Das HTML ist oben leicht falsch. Der Name für die Radio-Inputs sollte bei allen gleich sein. Zum Beispiel sollten sie alle name="color" sein.

Antworten

A2D

# 27. September 2017

Hallo, es gibt keine Erwähnung des select (Dropdown)-Elements und seiner Kind-Option-Elemente, die ausgewählt werden, wenn das select initial gerendert wird. Dies scheint in Chrome und Safari (OSX und iOS) gut zu funktionieren.

Mit diesem Markup

<select required>
    <option value="" disabled="disabled" selected="selected">Select a value</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>

und diesem CSS

select option:default {
    display: none;
}

erhalten Sie ein Dropdown, bei dem die erste Option wie ein Platzhalter angezeigt wird, aber in der Optionsliste nicht sichtbar ist, wenn sie angezeigt wird.

Dies funktioniert auch für die mobilen Select-Widgets auf Chrome Android und Safari iOS.

Antworten

Emin Altan

# 30. Januar 2023

Hallo,

Was ist der Unterschied zwischen den Pseudo-Klassen checked und default, da sie ähnlich aussehen? Ich bin verwirrt. Bitte erklärt mir jemand den Unterschied zwischen den beiden Eigenschaften.

CSS

* {
  border: none;
}

:checked {
  outline: 3px solid orange;
}

:default {
  outline: 3px solid blue;
}

HTML

<input type="checkbox" checked />
    <!-- While :default pseudo-class defined last in CSS file this style win, when :checked pseudo-class defined in CSS file this last style win -->

Antworten

Weitere Ressourcen

Browser-Unterstützung

Kommentare

Eine Antwort hinterlassen Antwort abbrechen