4.1 Pseudoclasse :checked
Le pseudoclassi di modulo in CSS forniscono la possibilità di stilizzare gli elementi del modulo in base al loro stato.
Queste pseudoclassi permettono di creare moduli interattivi e accessibili, migliorando l'interfaccia utente e l'esperienza.
Diamo un'occhiata più da vicino alle pseudoclassi :checked, :disabled, :enabled e :invalid.
La pseudoclasse :checked si applica agli elementi del modulo che sono nello stato "selezionato". Questo riguarda le checkbox
(<input type="checkbox">), i radio button (<input type="radio">) e le opzioni (<option>).
Sintassi:
selettore:checked {
proprietà: valori;
}
Esempio di utilizzo
In questo esempio, le checkbox, i radio button e le opzioni selezionate ottengono un colore di sfondo corrispondente quando sono nello stato "selezionato":
/* Stilizzazione della checkbox selezionata */
input[type="checkbox"]:checked {
background-color: #3498db;
}
/* Stilizzazione del radio button selezionato */
input[type="radio"]:checked {
background-color: #2ecc71;
}
/* Stilizzazione dell'opzione selezionata */
option:checked {
background-color: #e74c3c;
}
4.2 Pseudoclasse :disabled
La pseudoclasse :disabled si applica agli elementi del modulo che sono nello stato disabilitato. Questo è utile per
stilizzare gli elementi che temporaneamente non sono disponibili per l'interazione.
Sintassi:
selettore:disabled {
proprietà: valori;
}
Esempio di utilizzo
In questo esempio, i campi di input e i pulsanti disabilitati ottengono un colore di sfondo, bordo e testo corrispondente, oltre a cambiare il cursore in "non consentito":
/* Stilizzazione del campo di input disabilitato */
input:disabled {
background-color: #f0f0f0;
border-color: #ccc;
color: #888;
}
/* Stilizzazione del pulsante disabilitato */
button:disabled {
background-color: #d0d0d0;
color: #777;
cursor: not-allowed;
}
4.3 Pseudoclasse :enabled
La pseudoclasse :enabled si applica agli elementi del modulo che sono nello stato abilitato.
Questo permette di stilizzare gli elementi disponibili per l'interazione.
Sintassi:
selettore:enabled {
proprietà: valori;
}
Esempio di utilizzo
In questo esempio, i campi di input e i pulsanti abilitati ottengono un colore di sfondo, bordo e testo corrispondente, oltre a cambiare il cursore in "puntatore":
/* Stilizzazione del campo di input abilitato */
input:enabled {
background-color: #fff;
border-color: #3498db;
}
/* Stilizzazione del pulsante abilitato */
button:enabled {
background-color: #2ecc71;
color: white;
cursor: pointer;
}
4.4 Pseudoclasse :invalid
La pseudoclasse :invalid si applica agli elementi del modulo che non hanno superato la validazione. Questo permette di stilizzare
i campi di input che contengono dati non corretti.
Sintassi:
selettore:invalid {
proprietà: valori;
}
Esempio di utilizzo
In questo esempio, i campi di input e i campi di testo non corretti ottengono un colore di bordo e di sfondo corrispondente, per mostrare visivamente che i dati non hanno superato la validazione:
/* Stilizzazione del campo di input non corretto */
input:invalid {
border-color: #e74c3c;
background-color: #f9e0e0;
}
/* Stilizzazione del campo di testo non corretto */
textarea:invalid {
border-color: #e74c3c;
background-color: #f9e0e0;
}
4.5 Esempio di implementazione completa
/* Stilizzazione della checkbox selezionata */
input[type="checkbox"]:checked {
background-color: #3498db;
}
/* Stilizzazione del radio button selezionato */
input[type="radio"]:checked {
background-color: #2ecc71;
}
/* Stilizzazione del campo di input disabilitato */
input:disabled {
background-color: #f0f0f0;
border-color: #ccc;
color: #888;
}
/* Stilizzazione del pulsante disabilitato */
button:disabled {
background-color: #d0d0d0;
color: #777;
cursor: not-allowed;
}
/* Stilizzazione del campo di input abilitato */
input:enabled {
background-color: #fff;
border-color: #3498db;
}
/* Stilizzazione del pulsante abilitato */
button:enabled {
background-color: #2ecc71;
color: white;
cursor: pointer;
}
/* Stilizzazione del campo di input non corretto */
input:invalid {
border-color: #e74c3c;
background-color: #f9e0e0;
}
/* Stilizzazione del campo di testo non corretto */
textarea:invalid {
border-color: #e74c3c;
background-color: #f9e0e0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Esempio di pseudoclassi di modulo</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<form>
<label>
<input type="checkbox" name="option1"> Opzione 1
</label>
<br>
<label>
<input type="radio" name="choice" value="1"> Scelta 1
</label>
<label>
<input type="radio" name="choice" value="2"> Scelta 2
</label>
<br>
<input type="text" placeholder="Inserisci il tuo nome" required>
<br>
<input type="email" placeholder="Inserisci la tua email" required>
<br>
<button type="submit">Invia</button>
<button type="button" disabled>Pulsante Disabilitato</button>
</form>
</body>
</html>
GO TO FULL VERSION