CSS :default Pseudo Classe
Usa la pseudo-classe CSS :default per selezionare e stilizzare gli elementi predefiniti. Leggi e pratica con esempi.
La pseudo-classe :default corrisponde all'elemento predefinito in un gruppo di controlli di form associati — quello che il browser invierebbe (o preseleziona) se l'utente non modifica nulla. Un esempio tipico è il pulsante radio che risulta selezionato fin dall'inizio tramite l'attributo checked.
La distinzione fondamentale è tra lo stato predefinito e lo stato corrente:
:defaultcorrisponde all'elemento che era il predefinito al caricamento della pagina, e continua a corrispondere a quell'elemento anche dopo che l'utente ne sceglie un altro.:checkedcorrisponde a ciò che è attualmente selezionato, quindi si aggiorna man mano che l'utente interagisce.
In un gruppo di radio button con un pulsante checked, :default punta sempre a quel pulsante originale, mentre :checked segue la scelta dell'utente. Questo rende :default utile per indicare "questa è l'opzione consigliata/originale" senza che lo stile cambi mentre l'utente fa clic.
Dove si applica
:default corrisponde solo a questi elementi:
<button>— il pulsante di invio predefinito di un form (il primo pulsante submit).<input>contype="checkbox"otype="radio"— una casella di controllo/radio che ècheckedper impostazione predefinita.<input>contype="submit"otype="image"— il controllo di invio predefinito del form.<option>— un'opzione che porta l'attributoselected.
Non ha effetto sugli input di testo, sull'elemento <select> in sé, né su alcun elemento non appartenente a un form.
Versione
Sintassi
:default {
/* CSS declarations */
}Quasi sempre lo si combina con un selettore di elemento o di attributo in modo che la regola agisca solo sul controllo desiderato, ad esempio input:default o input[type="submit"]:default.
Esempio con un radio button selezionato per impostazione predefinita
Il radio contrassegnato come checked mantiene il bagliore blu anche dopo che si seleziona No, perché :default ricorda il valore predefinito al momento del caricamento.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input:default {
box-shadow: 0 0 2px 2px #1c87c9;
}
.example {
margin: 20px auto;
font-size: 20px;
}
</style>
</head>
<body>
<h2>:default selector example</h2>
<div class="example">
<p>Do you like coffee?</p>
<input type="radio" name="radios" id="ex1" checked />
<label for="ex1">Yes</label>
<br />
<input type="radio" name="radios" id="ex2" />
<label for="ex2">No</label>
</div>
</body>
</html>Esempio con il pulsante submit predefinito
Il primo pulsante submit di un form è il suo controllo predefinito — premendo Invio in un campo si attiva quel pulsante. Qui :default evidenzia quel primo pulsante così gli utenti possono vedere quale azione viene eseguita per impostazione predefinita.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
margin: 40px auto;
max-width: 700px;
}
input[type=submit] {
padding: .6em 1em;
font-size: 1em;
width: 100px;
margin-bottom: 1em;
}
input[type=submit]:default {
border: 4px dotted #8ebf42;
}
</style>
</head>
<body>
<h2>:default selector example</h2>
<div class="example">
<form action="#">
<input type="submit" value="Yes" />
<input type="submit" value="No" />
</form>
</div>
</body>
</html>Esempio con un'opzione selezionata per impostazione predefinita
Per un menu <select>, :default punta all'<option> che ha l'attributo selected — il valore mostrato prima che l'utente apra il menu a tendina.
option:default {
font-weight: bold;
color: #1c87c9;
}<label for="size">Size:</label>
<select id="size">
<option>Small</option>
<option selected>Medium</option>
<option>Large</option>
</select>Qui Medium è stilizzato perché porta l'attributo selected, anche dopo che l'utente sceglie una dimensione diversa.
Note e avvertenze
- Un solo predefinito per gruppo. Un gruppo di radio button dovrebbe avere al massimo un predefinito; se si contrassegnano più elementi come
checked, solo l'ultimo risulta predefinito nel DOM. :defaultè statico,:checkedè dinamico. Usa:defaultper indicare la scelta originale/consigliata e:checkedper reagire alla selezione corrente dell'utente.- Pulsanti submit. Solo il primo controllo di tipo submit in un form è il predefinito, quindi
:defaultcorrisponde a un solo pulsante anche quando ne esistono più. - Combinalo con le pseudo-classi di stato come
:disabled,:enabled,:requirede:optionalper creare form chiari e completamente stilizzati.
Supporto dei browser
:default è supportato in tutti i browser moderni, inclusi Chrome, Firefox, Safari ed Edge.