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.

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

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>