Fokus-Effekte

Teil des Abschnitts CSS Mastery der HTML-Journey von Coddy — Lektion 9 von 43.

Die Pseudo-Klasse :focus ermöglicht es Ihnen, ein Element zu gestalten, wenn es den Fokus erhält – zum Beispiel, wenn Sie darauf klicken oder mit der Tastatur durchtabben. Es ist eine großartige Möglichkeit, das Element hervorzuheben, mit dem Sie gerade interagieren! Zum Beispiel:

<input type="text">

Gestalten Sie das Eingabefeld, wenn es den Fokus erhält:

input {
  border: 2px solid #ccc;
}

input:focus {
  border-color: #4285f4;
  box-shadow: 0 0 5px rgba(66, 133, 244, 0.5);
}

Wenn der Benutzer auf dieses Eingabefeld klickt oder mit der Tabulatortaste dorthin navigiert, ändert der Rahmen seine Farbe zu Blau und ein dezenter blauer Schatten erscheint darum herum.

Teste dich selbst

Diese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.

Teste dich selbst

Diese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.

Aufgabe

Einfach

Erstellen Sie eine CSS-Regel, die ein spezielles Styling auf ein Texteingabefeld anwendet, wenn dieses den Fokus erhält.

Ändert beim Fokussieren den Rahmen in Orange rgb(255, 152, 0)
Fügt beim Fokussieren eine gelbe Hintergrundfarbe rgb(255, 243, 224) hinzu

Spickzettel

Die Pseudoklasse :focus gestaltet ein Element, wenn es den Fokus erhält (angeklickt oder mit der Tabulatortaste ausgewählt):

input {
  border: 2px solid #ccc;
}

input:focus {
  border-color: #4285f4;
  box-shadow: 0 0 5px rgba(66, 133, 244, 0.5);
}

Dies ändert die Rahmenfarbe und fügt einen Schatten hinzu, wenn das Eingabefeld fokussiert ist.

Probier es selbst

<!DOCTYPE html>
<html>
<head>
     <title>Focus Effects</title>
  <style>
    input{
      border: 2px solid gray;
      padding: 8px;
      outline: none;
    }
     /* Write your CSS here */
    
  </style>
</head>
<body>
  <h3>Focus Effects Demo</h3>
  <input type="text" placeholder="Type here...">
  <button>Click Me</button>
</body>
</html>

Teste dich selbst

Diese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.