Stilizzazione dello stato degli elementi

10.1 Pseudo-classe :focus

Le pseudo-classi CSS forniscono ottimi strumenti per stilizzare gli elementi in vari stati. Con il loro aiuto puoi migliorare l'interazione dell'utente con moduli e altri elementi interattivi su una pagina web. Vediamo come puoi usare le pseudo-classi :focus, :hover, :disabled e :checked per stilizzare gli elementi di input (<input>).

La pseudo-classe :focus si applica a un elemento del modulo quando riceve il focus. Di solito accade quando clicchi sull'elemento o ci arrivi tramite il tasto Tab. Stilizzare gli elementi focalizzati aiuta gli utenti a orientarsi meglio nel modulo.

Esempio di utilizzo:

    
      input:focus {
        border-color: #4A90E2;
        box-shadow: 0 0 5px rgba(74, 144, 226, 0.5);
        outline: none;
      }
    
  

    
      <form>
        <label for="name">Nome:</label>
        <input type="text" id="name" name="name">
      </form>
    
  

Spiegazione

• border-color: cambia il colore del bordo dell'elemento quando riceve il focus
• box-shadow: aggiunge un effetto ombra attorno all'elemento per evidenziarlo
• outline: rimuove il contorno predefinito del browser sostituendolo con uno stile personalizzato

10.2 Pseudo-classe :hover

La pseudo-classe :hover si applica a un elemento quando l'utente ci passa sopra con il cursore. Questo può essere utile per fornire un feedback visivo durante l'interazione con l'elemento.

Esempio di utilizzo:

    
      input:hover {
        border-color: #50E3C2;
        background-color: #F0F8FF;
      }
    
  

    
      <form>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email">
      </form>
    
  

Spiegazione

• border-color: cambia il colore del bordo dell'elemento quando il cursore è su di esso
• background-color: cambia il colore di sfondo dell'elemento al passaggio del cursore

10.3 Pseudo-classe :disabled

La pseudo-classe :disabled si applica agli elementi del modulo che sono disabilitati, cioè inattivi e non possono essere usati o modificati dall'utente. Questo aiuta gli utenti a capire che l'elemento non è disponibile per l'interazione.

Esempio di utilizzo:

    
      input:disabled {
        background-color: #E0E0E0;
        color: #A0A0A0;
        cursor: not-allowed;
      }
    
  

    
      <form>
        <label for="username">Nome utente:</label>
        <input type="text" id="username" name="username" disabled>
      </form>
    
  

Spiegazione

• background-color: cambia il colore di sfondo dell'elemento disabilitato per mostrare che è inattivo
• color: cambia il colore del testo all'interno dell'elemento disabilitato
• cursor: imposta il cursore su "not-allowed" per mostrare visivamente che l'elemento non è disponibile

10.4 Pseudo-classe :checked

La pseudo-classe :checked si applica agli elementi di tipo checkbox e radio che sono in stato selezionato. Questo permette di stilizzare gli elementi selezionati, rendendoli più visibili.

Esempio di utilizzo:

    
      input[type="checkbox"]:checked,
      input[type="radio"]:checked {
        background-color: #4A90E2;
        border-color: #4A90E2;
      }
    
  

    
      <form>
        <label>
          <input type="checkbox" name="option" checked>
          Opzione 1
        </label>
        <label>
          <input type="checkbox" name="option">
          Opzione 2
        </label>
        <label>
          <input type="radio" name="choice" checked>
          Scelta 1
        </label>
        <label>
          <input type="radio" name="choice">
          Scelta 2
        </label>
      </form>
    
  

Spiegazione

• background-color: cambia il colore di sfondo dell'elemento selezionato
• border-color: cambia il colore del bordo dell'elemento selezionato