Effetti di focus

Fa parte della sezione Padronanza di CSS del percorso HTML di Coddy. Lezione 9 di 43.

La pseudo-classe :focus ti consente di definire lo stile di un elemento quando riceve il focus, ad esempio quando fai clic su di esso o ci passi sopra usando la tastiera. È un ottimo modo per evidenziare l'elemento con cui stai interagendo! Per esempio:

<input type="text">

Stilizza l'input quando riceve il focus:

input {
  border: 2px solid #ccc;
}

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

Quando l’utente fa clic su questo campo di input o vi passa usando il tasto Tab, il bordo diventa blu e attorno ad esso appare una delicata ombra blu.

Sfida

Facile

Crea una regola CSS che applichi uno stile speciale a un campo di testo quando riceve il focus.

Quando è selezionato, cambia il bordo in arancione rgb(255, 152, 0)
Quando è selezionato, aggiunge un colore di sfondo giallo rgb(255, 243, 224)

Provalo tu

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