Comment appliquer un style aux contrôles de case à cocher (HTML)

Article
03/04/2016

[ Cet article est destiné aux développeurs Windows 8.x et Windows Phone 8.x qui créent des applications Windows Runtime. Si vous développez une application pour Windows 10, voir la Documentation ]

Il existe un grand nombre de propriétés et de pseudo-classes CSS que vous pouvez utiliser pour appliquer un style à un objet checkbox. Cette rubrique décrit certaines des propriétés et pseudo-classes les plus couramment utilisées.

Ce que vous devez savoir

Technologies

Prérequis

Démarrage rapide : ajout de contrôles de case à cocher

Propriétés CSS utiles

CSS fournit un grand nombre de propriétés que vous pouvez utiliser pour appliquer un style à des éléments HTML. Mais la liste de ces propriétés est longue et il peut sembler décourageant de toutes les parcourir. Voici une liste réduite des propriétés CSS qui sont particulièrement utiles pour appliquer un style au contrôle checkbox.

background
Spécifie l’arrière-plan de la face de l’objet checkbox. Cet exemple donne une case à cocher avec un arrière-plan dégradé.

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

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

Une case à cocher avec un arrière-plan dégradé

border
Spécifie l’épaisseur, le style de ligne et la couleur de la bordure de l’objetcheckbox.

Cet exemple donne une case à cocher avec une bordure rouge.
```
#borderExampleCheckbox {
    border: 1px solid red;
}
```
```
    <label>
        <input id="borderExampleCheckbox" type="checkbox" />Option
    </label>
```

(Notez que ce n’est pas une liste complète de tout ce que vous pouvez utiliser. Pour obtenir la liste complète de toutes les propriétés CSS, voir les informations de référence sur les feuilles de style en cascade (CSS).)

Pseudo-éléments pour appliquer un style aux contrôles de case à cocher

Le contrôle checkbox fournit le pseudo-élément suivant, que vous pouvez utiliser comme sélecteur pour appliquer un style à une partie spécifique du contrôle :

::-ms-check
Applique un ou plusieurs styles à la coche de la case à cocher.

Cet exemple rend la coche d’une case à cocher verte.

#checkExampleCheckbox::-ms-check {
    color: green;
}

    <label>
        <input id="checkExampleCheckbox" type="checkbox" checked />Option
    </label>

Pseudo-classes pour appliquer un style aux contrôles de case à cocher

Ce contrôle prend en charge les pseudo-classes suivantes que vous pouvez utiliser comme sélecteurs pour appliquer un style au contrôle lorsqu’il se trouve dans certains états.

:checked
Applique des styles à un contrôle checkbox dans l’état sélectionné, ou activé.
:indeterminate
Applique des styles à un contrôle checkbox dans l’état indéterminé.
:hover
Applique des styles à un contrôle checkbox lorsque l’utilisateur place le curseur sur l’objet checkbox mais qu’il ne l’a pas activé en cliquant dessus.
:active
Applique des styles à un contrôle checkbox lorsqu’il est actif. L’objet checkbox est actif entre le moment où l’utilisateur appuie sur le contrôle et le moment où il le relâche. Si l’utilisateur appuie sur le contrôle et fait glisser le pointeur hors du contrôle checkbox, le contrôle reste actif jusqu’à ce que l’utilisateur relâche le pointeur.
:focus
Applique des styles à un contrôle checkbox lorsqu’il a le focus. Il existe plusieurs façons de donner le focus à un objet checkbox :
- Désignez l’objet checkbox à l’aide d’un dispositif de pointage.
- Naviguez jusqu’à l’objet checkbox à l’aide des touches Tab et Maj+Tab.
- Sélectionnez l’objet checkbox à l’aide d’une propriété keyboard shortcut.
:disabled
Applique des styles à un contrôle checkbox lorsqu’il est désactivé. Pour désactiver un contrôle checkbox, ajoutez l’attribut disabled à son code HTML ou affectez la valeur true à la propriété disabled en JavaScript.

(Pour plus d’informations sur les différentes façons de combiner des pseudo-classes et d’autres sélecteurs, voir Présentation des sélecteurs CSS.)

Rubriques associées

Exemple de contrôles essentiels HTML

Démarrage rapide : ajout de contrôles de case à cocher

Recommandations et liste de vérification pour les contrôles de case à cocher

Partager via