CSS :required-Pseudoklasse

Die CSS-Pseudoklasse :required wählt Formularelemente aus, die das Attribut required gesetzt haben. Dies ermöglicht Formularen anzuzeigen, welche Felder vor der Übermittlung gültige Daten enthalten müssen, und hilft Nutzern, unnötige Wartezeiten zu vermeiden.

Sie gilt für Formularelemente, die das Attribut required unterstützen, wie <input>, <select> und <textarea>. Der Selektor :required kann mit Pseudoelementen (z. B. ::after) und anderen Selektoren (z. B. :hover) verknüpft werden. Nicht erforderliche Elemente können mit der Pseudoklasse :optional sowie :valid und :invalid angepasst werden, die aktiviert werden, wenn die Datenanforderungen eines Formularfelds erfüllt sind.

Version

W3C Selectors Level 4

CSS Basic User Interface Module Level 3

Syntax

CSS :required-Syntax

css

:required {
  css declarations;
}

Beispiel für den :required-Selektor:

CSS :required-Codebeispiel

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        margin: 40px auto;
        max-width: 400px;
      }
      label,
      button {
        display: block;
        width: 100%;
        margin-bottom: 1.5em;
      }
      input,
      button {
        padding: .4em 1em;
      }
      input {
        border: 1px solid #666666;
      }
      input:optional {
        background-color: #eeeeee;
        color: #666666;
      }
      input:required {
        border-bottom: 3px solid #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>:required selector example</h2>
    <div class="example">
      <form action="#">
        <label>
          <input type="text" required />Name *
        </label>
        <label>
          <input type="email" required />Email *
        </label>
        <label>
          <input type="tel" />Phone (optional)
        </label>
        <label>
          <input type="url" />Address (optional)
        </label>
      </form>
    </div>
  </body>
</html>

Try it Yourself »

Im obigen Beispiel werden sowohl die Pseudoklasse :optional als auch der Selektor :required verwendet.

Practice

Welche Funktion hat die Pseudoklasse ':required' in CSS?

Sie wählt jedes <input>-Element mit einem 'required'-Attribut ausSie wählt jedes <input>-Element ohne 'required'-Attribut ausSie bindet Bilder in die CSS-Datei einSie wird verwendet, um Elemente auszuwählen, die das required-Attribut im Formular habenSie passt die Größe von Bildern in CSS an

CSS :required-Pseudoklasse ​

Version ​

Syntax ​

Beispiel für den :required-Selektor: ​

Practice ​

CSS :required-Pseudoklasse

Version

Syntax

Beispiel für den :required-Selektor:

Practice