CSS :focus-Pseudoklasse

Die :focus-Pseudoklasse wählt Elemente aus, auf die der Benutzer den Fokus gesetzt hat, und formatiert sie.

Elemente wie <input>, <button> und <textarea> können den Fokus entweder durch Drücken der Tabulatortaste oder durch Klicken erhalten. Nicht-interaktive Elemente können ebenfalls den Tastaturfokus erhalten, wenn sie ein tabindex="0"-Attribut enthalten.

Barrierefreiheit

Der visuelle Fokusindikator sollte für alle Benutzer zugänglich sein. Gemäß WCAG 2.1 SC 2.4.7 Focus Visible muss der Fokusindikator deutlich sichtbar sein und einen Kontrastverhältnis von mindestens 3:1 zu den angrenzenden Farben aufweisen.

Wenn Sie den Standard-Fokusrahmen entfernen, ersetzen Sie ihn immer durch einen benutzerdefinierten Indikator, der die Anforderungen von WCAG 2.1 SC 2.4.7 erfüllt.

Für eine bessere Benutzererfahrung sollten Sie stattdessen die :focus-visible-Pseudoklasse anstelle von :focus verwenden. Diese wendet Stile nur an, wenn das Element über die Tastatur fokussiert wird, und vermeidet so unnötige visuelle Änderungen bei der Verwendung einer Maus oder Touch-Eingabe.

CSS :focus-Pseudoklasse

css

:focus {
  outline: none;
}

Version

CSS2 Spec

Selectors level 3

Selectors level 4

Syntax

CSS :focus-Syntaxbeispiel

css

:focus {
  css declarations;
}

Beispiel für den :focus-Selektor:

CSS :focus-Codebeispiel

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      input:focus {
        background-color: #ccc;
      }
    </style>
  </head>
  <body>
    <h2>:focus selector example</h2>
    <form>
      Name:
      <input type="text" name="name" /> Surname:
      <input type="text" name="surname" />
    </form>
  </body>
</html>

Try it Yourself »

Beispiel für den :focus-Selektor mit dem `<label>`-Tag:

CSS :focus weiteres Codebeispiel

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      input[type=text] {
        width: 100px;
        transition: width .2s ease-in-out;
      }
      input[type=text]:focus {
        width: 150px;
        background-color: #eee;
      }
    </style>
  </head>
  <body>
    <h2>:focus selector example</h2>
    <form>
      <label for="search">Search:</label>
      <input type="text" name="search" id="search" />
    </form>
  </body>
</html>

Try it Yourself »

Praxis

Welche Funktion hat die ':focus'-Pseudoklasse in CSS?

Sie dient dazu, das aktuelle Element auszuwählen und zu formatieren, mit dem ein Benutzer interagiert.Sie wird verwendet, um einem Element Stile zuzuweisen, wenn der Mauszeiger des Benutzers darüber schwebt.Sie wird verwendet, um ein Element auszuwählen und zu formatieren, wenn es angeklickt oder angetippt wurde.Sie wird verwendet, um ein Element zu formatieren, wenn der Mauszeiger des Benutzers davon weg bewegt wird.

CSS :focus-Pseudoklasse ​

Barrierefreiheit ​

Version ​

Syntax ​

Beispiel für den :focus-Selektor: ​

Beispiel für den :focus-Selektor mit dem <label>-Tag: ​