Efekty fokusu

Część sekcji Mistrzowskie opanowanie CSS ścieżki HTML w Coddy. Lekcja 9 z 43.

Pseudoklasa :focus pozwala stylizować element, gdy zostanie zaznaczony, na przykład po kliknięciu go lub przejściu do niego klawiszem Tab. To świetny sposób na wyróżnienie elementu, z którym wchodzisz w interakcję! Na przykład:

<input type="text">

Stylizuj pole wejściowe, gdy uzyska fokus:

input {
  border: 2px solid #ccc;
}

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

Gdy użytkownik kliknie to pole wejściowe lub przejdzie do niego klawiszem Tab, obramowanie zmieni kolor na niebieski, a wokół pola pojawi się delikatny niebieski cień.

Wyzwanie

Łatwy

Utwórz regułę CSS, która stosuje specjalny styl do pola tekstowego po uzyskaniu przez nie fokusu.

Po uzyskaniu fokusu zmienia obramowanie na pomarańczowe rgb(255, 152, 0)
Po uzyskaniu fokusu dodaje żółty kolor tła rgb(255, 243, 224)

Spróbuj swoich sił

<!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>