CodeGym/Corsi/Frontend SELF IT/Stilizzazione dello stato degli elementi

Stilizzazione dello stato degli elementi

Disponibile

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:

CSS
input:focus {
  border-color: #4A90E2;
  box-shadow: 0 0 5px rgba(74, 144, 226, 0.5);
  outline: none;
}
HTML
<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:

CSS
input:hover {
  border-color: #50E3C2;
  background-color: #F0F8FF;
}
HTML
<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:

CSS
input:disabled {
  background-color: #E0E0E0;
  color: #A0A0A0;
  cursor: not-allowed;
}
HTML
<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:

CSS
input[type="checkbox"]:checked,
input[type="radio"]:checked {
  background-color: #4A90E2;
  border-color: #4A90E2;
}
HTML
<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
1
Compito
Frontend SELF IT,  livello 9lezione 4
Bloccato
Focus del campo
Focus del campo
1
Compito
Frontend SELF IT,  livello 9lezione 4
Bloccato
Hover del cursore
Hover del cursore
Commenti
  • Popolari
  • Nuovi
  • Vecchi
Devi avere effettuato l'accesso per lasciare un commento
Questa pagina non ha ancora commenti