Come applicare stili ai controlli casella di controllo (HTML)

Articolo
03/04/2016

[ Questo articolo è rivolto agli sviluppatori per Windows 8.x e Windows Phone 8.x che realizzano app di Windows Runtime. Gli sviluppatori che usano Windows 10 possono vedere Documentazione aggiornata ]

Per applicare stili a un controllo checkbox, puoi usare molte proprietà e pseudoclassi CSS. Questo argomento descrive alcune delle proprietà e delle pseudoclassi usate più spesso.

Cosa sapere

Tecnologie

Prerequisiti

Guida introduttiva: Aggiunta di controlli casella di controllo

Proprietà CSS utili

CSS offre molte proprietà che puoi usare per applicare stili agli elementi HTML. Ma l'elenco di queste proprietà è lungo e scorrerlo tutto può essere scoraggiante. Ecco un breve elenco delle proprietà CSS particolarmente utili per l'applicazione di stili al controllo checkbox.

background
Specifica lo sfondo della superficie del controllo checkbox. Questo esempio applica alla casella di controllo uno sfondo sfumato.

#backgroundExampleCheckbox {
    background: -ms-linear-gradient(green, blue );
}

    <label>
        <input id="backgroundExampleCheckbox" type="checkbox" />Option
    </label>

Casella di controllo con sfondo sfumato

border
Specifica lo spessore, lo stile del contorno e il colore del bordo del checkbox.

Questo esempio applica un bordo rosso alla casella di controllo.

#borderExampleCheckbox {
    border: 1px solid red;
}

    <label>
        <input id="borderExampleCheckbox" type="checkbox" />Option
    </label>

Casella di controllo con bordo rosso

Tieni presente che questo non è un elenco completo di tutte le opzioni a tua disposizione. Per un elenco completo di tutte le proprietà CSS, vedi Informazioni di riferimento sui fogli di stile CSS.

Pseudoelementi per l'applicazione di stili ai controlli casella di controllo

Il controllo checkbox fornisce il seguente pseudoelemento che puoi usare come selettore per applicare uno stile a una parte specifica del controllo:

::-ms-check
Applica uno o più stili al segno di spunta della casella di controllo.

Questo esempio applica il colore verde al segno di spunta di una casella di controllo.
```
#checkExampleCheckbox::-ms-check {
    color: green;
}
```
```
    <label>
        <input id="checkExampleCheckbox" type="checkbox" checked />Option
    </label>
```

Pseudoclassi per l'applicazione di stili ai controlli casella di controllo

Questo controllo supporta le seguenti pseudoclassi che puoi usare come selettori per applicare uno stile al controllo quando si trova in stati specifici.

:checked
Applica stili a un controllo checkbox nello stato selezionato.
:indeterminate
Applica stili a un controllo checkbox nello stato indeterminato.
:hover
Applica stili a un controllo checkbox quando l'utente posiziona il cursore su checkbox ma non ha ancora attivato il controllo facendovi clic.
:active
Applica stili a un controllo checkbox quando è attivo. Il controllo checkbox è attivo tra il momento in cui l'utente lo preme e il momento in cui lo rilascia. Se l'utente preme il controllo e trascina il puntatore lontano dal checkbox, il controllo rimane attivo finché l'utente non rilascia il puntatore.
:focus
Applica stili a un controllo checkbox quando si trova nello stato attivo. Puoi assegnare lo stato attivo a un controllo checkbox in diversi modi:
- Designa checkbox con un dispositivo di puntamento.
- Passa a checkbox usando i tasti TAB e MAIUSC+TAB.
- Seleziona il checkbox mediante un keyboard shortcut.
:disabled
Applica stili a un controllo checkbox quando è disabilitato. Per disabilitare un controllo checkbox, aggiungi l'attributo disabled al codice HTML o imposta la proprietà disabled su true in JavaScript.

Per altre info sui vari modi in cui puoi combinare pseudoclassi e altri selettori, vedi Informazioni sui selettori CSS.

Argomenti correlati

Esempi di controlli essenziali HTML

Guida introduttiva: Aggiunta di controlli casella di controllo

Linee guida ed elenco di controllo per i controlli casella di controllo

Condividi tramite