CSS 3 ha introdotto una serie di pseudo-classi per l'interfaccia utente che vengono utilizzate per dare uno stile agli elementi interattivi in base al loro stato attuale.
Indice
- enabled e disabled
- checked
- valid e invalid
- required e optional
- out-of-range e in-range
- read-write e read-only
enabled e disabled
Le pseudo-classi :enabled e :disabled corrispondono a qualsiasi elemento del tipo selezionato con stato abilitato o disabilitato. Si applicano solo a elementi interattivi che possono essere abilitati o disabilitati, come gli elementi dei form.
input:enabled { background-color: white; }
input:disabled { background-color: black; }
Il seguente form contiene un input abilitato e uno disabilitato, che sono interessati da queste due regole:
<form>
<input type="text" name="enabled">
<input type="text" name="disabled" disabled>
</form>
checked
La pseudo-classe :checked corrisponde a elementi che si trovano in uno stato selezionato. Può essere utilizzato solo sulle check box, sui radio button e sugli elementi <option>.
input[type="checkbox"]:checked {}
Questa regola corrisponde a tutte le check box selezionate nella pagina Web.
<form>
<input type="checkbox">
</form>
valid e invalid
Le pseudo-classi :valid e :invalid sono utilizzate per fornire feedback agli utenti durante la compilazione dei form. I browser moderni possono eseguire una validazione del campo basata sul tipo di input di un elemento del form e, insieme a queste pseudo-classi, determinano se il risultato potrà essere usato per dare uno stile all'elemento di input.
input:valid { background: green; }
input:invalid { background: red; }
Nell'esempio che segue sono indicati due campi, uno obbligatorio e uno facoltativo. Il primo campo non sarà valido fino a quando non verrà inserita un'e-mail. Il secondo campo, essendo facoltativo, rimane valido anche se lasciato vuoto.
<form>
<input type="email" required>
<input type="email">
</form>
required e optional
Quando un campo nei form è richiesto viene utilizzate la pseudo-classe :required. La pseudo-classe :optional invece fa il contrario: essa corrisponde a elementi di input che non hanno il campo richiesto nella compilazione.
input:required { color: red; }
input:optional { color: yellow; }
Il seguente form contiene un elemento di input richiesto e uno opzionale:
<form>
<input type="email" required>
<input type="url">
</form>
out-of-range e in-range
Un elemento di input può includere gli attributi min e max per definire l'intervallo di valori per un dato elemento. Le pseudo-classi :out-of-range e :in-range possono essere applicate agli elementi che sono dentro o fuori ad un certo intervallo di valori di riferimento.
input:out-of-range { color: red; }
input:in-range { color: green; }
Il seguente form mostra due campi di input con gli attributi min e max:
<form>
<input type="number" min="1" max="10">
<input type="date" min="1986-11-02">
</form>
read-write e read-only
Gli elementi di input che includono l'attributo di sola lettura non possono essere modificati. Gli elementi che non possono essere modificati hanno come pseudo-classe di riferimento :read-only. Al contrario qualsiasi elemento che può essere modificato può essere selezionato con la pseudo-classe :read-write.
input:read-only { color: white; }
input:-moz-read-only { color: white; }
input:read-write { color: black; }
input:-moz-read-write { color: black; }
Il prefisso -moz- è necessario per tutte le versioni di Firefox. Il seguente esempio mostra l'assegnazione dell'attributo read-only ad un elemento di input del form.
<form>
<input type="text" value="unavailable" readonly>
</form>
