CSS :optional Pseudo Classe
Usa la pseudo-classe CSS :optional per selezionare gli elementi facoltativi. Scopri la pseudo-classe e pratica con esempi.
La pseudo-classe :optional corrisponde a ogni controllo del modulo che l'utente non è obbligato a compilare. È l'esatto contrario di :required: un controllo corrisponde all'uno o all'altro, mai a entrambi.
Un controllo del modulo è "facoltativo" semplicemente perché non ha l'attributo required. Questa pagina spiega a quali elementi si applica :optional, come si differenzia dalle pseudo-classi correlate e come usarla per fornire agli utenti un suggerimento visivo sui campi che possono tranquillamente saltare.
A quali elementi corrisponde :optional?
Solo i tre controlli del modulo che accettano l'attributo required possono corrispondere a :optional:
<input>(eccettotype="hidden",type="range",type="color", i pulsanti e tipi simili che non possono mai essere obbligatori)<select><textarea>
Ognuno di questi senza un attributo required è abbinato da :optional. Gli elementi che non possono mai essere obbligatori — come <div>, <p> o un <button> di invio — non corrispondono mai.
:optional vs :required
Queste due pseudo-classi suddividono ogni controllo che può essere reso obbligatorio:
| Controllo | Abbinato da :required | Abbinato da :optional |
|---|---|---|
<input required> | sì | no |
<input> | no | sì |
<select required> | sì | no |
<textarea> | no | sì |
Poiché i due non si sovrappongono mai, un pattern comune è lasciare i campi facoltativi neutri ed evidenziare solo quelli obbligatori — o, come nell'esempio seguente, attenuare i campi facoltativi affinché si ritirino visivamente.
Sintassi
:optional {
/* CSS declarations */
}Puoi concatenare :optional con altri selettori e pseudo-classi (es. :hover, :focus) e con pseudo-elementi (es. ::after) per costruire stati più ricchi:
input:optional:focus {
outline: 2px solid #1c87c9;
}Esempio
L'esempio seguente applica uno stile agli input facoltativi con un aspetto attenuato e semitrasparente che si illumina al passaggio del mouse, mentre gli input obbligatori ottengono un bordo inferiore in grassetto in modo che la differenza sia evidente a colpo d'occhio:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
margin: 40px auto;
max-width: 400px;
}
label,
button {
display: block;
width: 100%;
margin-bottom: 1.5em;
}
input,
select,
button {
padding: .4em 1em;
}
input,
select {
border: 1px solid #666666;
}
input:optional,
select:optional {
background-color: #eeeeee;
color: #666666;
opacity: 0.5;
transition: .3s;
}
input:optional:hover,
select:optional:hover {
opacity: 1;
}
input:required,
textarea:required {
border-bottom: 3px solid #1c87c9;
}
</style>
</head>
<body>
<h2>:optional selector example</h2>
<div class="example">
<form action="#">
<label>
<input type="text" required />Name *
</label>
<label>
<input type="email" required />Email *
</label>
<label>
<input type="tel" />Phone (optional)
</label>
<label>
<input type="url" />Address (optional)
</label>
</form>
</div>
</body>
</html>Qui sia :optional che :required vengono usati insieme in modo che i due tipi di campo siano facili da distinguere.
Avvertenze
- I pulsanti di invio non sono facoltativi. Un
<button>o un<input type="submit">non può essere obbligatorio, quindi non corrisponde mai a:optional. Applica stili ai pulsanti con il loro selettore specifico. - Gli stati di validazione sono separati.
:optionalriporta solo se un campo è obbligatorio — non se il suo valore è valido. Per questo, usa:valide:invalid. - Si aggiorna in tempo reale. Se cambi l'attributo
requiredcon JavaScript, il browser rivaluta immediatamente:optional/:required, quindi lo stile viene aggiornato di conseguenza.
Pseudo-classi correlate
:required— l'inverso di:optional.:valide:invalid— corrispondono ai controlli in base al superamento della validazione del valore.:enablede:disabled— corrispondono in base all'interattività.:read-only— corrisponde ai controlli che l'utente non può modificare.