CSS :default-Pseudoklasse

Die :default-Pseudoklasse stimmt mit dem Standard-Element in einer Gruppe zugehöriger Elemente überein, wie z. B. dem Radiobutton, der ursprünglich über das checked-Attribut ausgewählt wurde, auch wenn der Benutzer später einen anderen Wert ausgewählt hat. Im Gegensatz zu :checked, das den aktuellen interaktiven Zustand widerspiegelt, stimmt :default nur mit dem ursprünglichen Standardzustand des Elements überein.

Diese Pseudoklasse kann nur für <button>, <input> (bei type="checkbox" oder type="radio") und <option> Elemente verwendet werden.

Version

HTML Living Standard

HTML5

Selectors Level 4

Syntax

CSS :default Syntaxcode

css

:default {
  css declarations;
}

Beispiel für die Verwendung des :default-Selektors für das `<input>`-Tag:

CSS :default Codebeispiel

html

<!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>

Try it Yourself »

Beispiel für die Verwendung des :default-Selektors für das `<input>`-Tag mit einem type-Attribut:

CSS :default weiteres Codebeispiel

html

<!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>

Try it Yourself »

Practice

Wofür kann der 'Standardstil' in CSS verwendet werden?

Er wird verwendet, um die Standardattraktivität jedes Elements zu definieren.Er wird verwendet, um das Standardlayout einer HTML-Seite festzulegen.Er kann verwendet werden, um Attribute wie Farbe und Schriftgröße einer HTML-Seite zu stylen.Er kann nicht zum Stylen von HTML-Elementen verwendet werden.

CSS :default-Pseudoklasse ​

Version ​

Syntax ​

Beispiel für die Verwendung des :default-Selektors für das <input>-Tag: ​