CSS :checked Pseudo Classe
Usa la pseudo-classe CSS :checked per selezionare e stilizzare gli elementi <input> e <option>. Scopri la pseudo-classe con esempi pratici.
La pseudo-classe :checked seleziona gli elementi che si trovano attualmente nello stato selezionato (checked). Si applica solo a tre tipi di elementi:
<input type="checkbox">quando la casella è spuntata,<input type="radio">quando il pulsante radio è selezionato,- gli elementi
<option>(all'interno di un<select>o<datalist>) attualmente scelti.
Poiché questi controlli vengono attivati e disattivati dall'utente, :checked è una pseudo-classe dinamica: gli stili scritti al suo interno si applicano solo mentre il controllo è nello stato attivo, e il browser li rivaluta nel momento in cui l'utente fa clic. Questo la rende il fondamento dell'interattività CSS pura — è possibile costruire toggle, accordion, tab e controlli di form con stili personalizzati senza una sola riga di JavaScript.
Questa pagina illustra cosa corrisponde a :checked, come combinarla con i combinatori di elementi adiacenti per stilizzare altri elementi (la maggior parte degli usi reali lo fa), tre esempi eseguibili e i punti di accessibilità da tenere a mente.
Come funziona :checked con i combinatori
:checked da sola può stilizzare solo il controllo stesso, e i checkbox/radio nativi sono difficili da ridisegnare. Il vero potere deriva dall'abbinarla a un combinatore, in modo che un input selezionato applichi stili a un elemento vicino:
- Fratello adiacente (
+) —input:checked + labelstilizza l'etichetta che segue immediatamente un input selezionato. - Fratello generale (
~) —input:checked ~ .panelstilizza qualsiasi fratello successivo, permettendo a un checkbox di mostrare un'intera sezione.
Un pattern comune consiste nel nascondere visivamente il vero input e lasciare che l'utente faccia clic su un <label> collegato ad esso (fare clic su un'etichetta attiva/disattiva il controllo associato). Il checkbox rimane nell'albero di accessibilità, ma si controllano i contenuti visivi tramite :checked e l'etichetta.
Versione
Sintassi
Esempio di sintassi CSS :checked
:checked {
css declarations;
}Nell'esempio seguente, seleziona il checkbox per vedere come funziona.
Esempio del selettore :checked con il tag <div>:
Esempio di codice CSS :checked
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
margin: 10px;
font-size: 20px;
}
input:checked + label {
color: #000;
}
input[type="radio"]:checked {
box-shadow: 0 0 0 4px #8ebf42;
}
/* Checkbox element, when checked */
input[type="checkbox"]:checked {
box-shadow: 0 0 0 3px #1c87c9;
}
</style>
</head>
<body>
<h2>:checked selector example</h2>
<div>
<input type="radio" name="my-input" id="yes" />
<label for="yes">Yes</label>
<input type="radio" name="my-input" id="no" />
<label for="no">No</label>
</div>
<div>
<input type="checkbox" name="my-checkbox" id="opt-in" />
<label for="opt-in">Check!</label>
</div>
</body>
</html>Esempio del selettore :checked con i tag <table>, <tr>, <th>, <td>:
Esempio di imitazione click CSS :checked
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table,tr,th,td {
border: 1px solid #ccc;
text-align: center;
border-collapse: collapse;
padding: 8px;
}
#toggle {
display: none;
}
.expandable {
visibility: collapse;
background: #1c87c9;
}
#btn {
display: inline-block;
margin-top: 15px;
padding: 10px 20px;
background-color: #8ebf42;
color: #fff;
cursor: pointer;
border-radius: 3px;
}
#toggle:checked ~ * .expandable {
visibility: visible;
}
#toggle:checked ~ #btn {
background-color: #ccc;
}
</style>
</head>
<body>
<h2>:checked selector example</h2>
<input type="checkbox" id="toggle" />
<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr class="expandable">
<td>[more text]</td>
<td>[more text]</td>
<td>[more text]</td>
</tr>
<tr>
<td>[text]</td>
<td>[text]</td>
<td>[text]</td>
</tr>
<tr class="expandable">
<td>[more text]</td>
<td>[more text]</td>
<td>[more text]</td>
</tr>
<tr>
<td>[text]</td>
<td>[text]</td>
<td>[text]</td>
</tr>
<tr class="expandable">
<td>[more text]</td>
<td>[more text]</td>
<td>[more text]</td>
</tr>
</tbody>
</table>
<label for="toggle" id="btn">Click here!</label>
</body>
</html>Esempio del selettore :checked:
Esempio della pseudo-classe CSS :checked:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input[type=checkbox] {
vertical-align:middle;
}
input[type=checkbox] + label {
color: #999999;
font-style: normal;
}
input[type=checkbox]:checked + label {
color: #8ebf42;
font-style: italic;
font-weight:bold;
}
</style>
</head>
<body>
<h2>:checked selector example</h2>
<form>
<input type="checkbox" id="css" name="css" />
<label for="css">Here is CSS example.</label>
</form>
</body>
</html>Quindi, la pseudo-classe :checked può essere utilizzata per rendere i form più interattivi e per costruire widget con input nascosti e le relative etichette visibili.
Casi d'uso comuni
- Checkbox e radio personalizzati. Nascondere il controllo nativo con
appearance: none(o ritagliandolo) e disegnare un proprio indicatore che reagisce ainput:checked. - Pannelli toggle / "mostra altro". Un checkbox nascosto insieme a
:checked ~ .panel { display: block }espande o comprime il contenuto (come nell'esempio con la tabella sopra) senza JavaScript. - Tab e accordion solo in CSS. Raggruppare i pulsanti radio con
name, quindi usareinput:checked ~ ...per mostrare il pannello corrispondente. - Stilizzare lo stato di
<option>.option:checkedpermette di evidenziare l'elemento attualmente selezionato in un<select>.
Accessibilità e avvertenze
- Mantieni l'input raggiungibile da tastiera. Usa
appearance: none, ritaglio oopacity: 0invece didisplay: nonese vuoi che gli utenti da tastiera possano raggiungere e attivare il controllo.display: nonerimuove completamente l'input dall'ordine di tabulazione. - Associa sempre un controllo a un
<label>. Un<label>correttamente associato (tramitefor/id) rende il testo visibile un target cliccabile e leggibile dagli screen reader per il controllo. - L'elemento stilizzato deve essere un fratello che viene dopo l'input. I combinatori di fratelli CSS (
+,~) guardano solo in avanti, quindi posiziona l'input prima degli elementi che controlla nell'HTML. :checkedriflette lo stato attuale, non l'attributo HTML. Anche un elemento senza l'attributocheckedcorrisponde a:checkeduna volta che l'utente lo seleziona, e uno con l'attributo smette di corrispondervi una volta che l'utente lo deseleziona.
Pseudo-classi correlate
:checked viene spesso combinata con altre pseudo-classi di stato e di form:
:disabled— stilizza i controlli con cui l'utente non può interagire.:required— stilizza i campi che devono essere compilati.:focuse:hover— stilizza gli stati di interazione, utili per controlli personalizzati.:not()— inverte una selezione, ad esempioinput:not(:checked).
Consulta l'elenco completo dei selettori CSS per altri modi di selezionare gli elementi.