Fokus-Effekte

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

Die Pseudoklasse :focus ermöglicht es dir, ein Element zu formatieren, wenn es den Fokus erhält, zum Beispiel wenn du darauf klickst oder es mithilfe der Tastatur per Tab erreichst. Das ist eine großartige Möglichkeit, das Element hervorzuheben, mit dem du gerade interagierst! Zum Beispiel:

<input type="text">

Stile 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 dorthin wechselt, ändert sich die Rahmenfarbe in Blau, und ein dezenter blauer Schatten erscheint darum.

Aufgabe

Einfach

Erstelle eine CSS-Regel, die eine spezielle Formatierung auf ein Texteingabefeld anwendet, wenn es den Fokus erhält.

Bei Fokus wird der Rahmen auf Orange rgb(255, 152, 0) geändert
Bei Fokus wird eine gelbe Hintergrundfarbe rgb(255, 243, 224) hinzugefügt

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>