Checkbox et boutons radios personnalisés en CSS

Voici une méthode simple pour personnaliser les cases à cocher (checkbox) et les boutons radio des formulaires. Cette méthode repose uniquement sur du code CSS et HTML, sans javascript, pour garder la ligne 🙂

Nous allons utiliser le pseudo-élément ::before, qui nous permettra de changer le design de la checkbox ou du bouton radio, et le sélecteur de formulaire :checked, qui détectera si la case ou le bouton est sélectionné.

Un peu de code HTML

Nous allons voir l’exemple pour les cases à cocher (chekbox), mais ce sera exactement la même méthode pour les boutons radio.
Dans un premier temps nous allons englober les éléments de formulaire dans un conteneur. Par exemple :

 <div class="formfield-checkbox">
       <input type="checkbox" id="checkbox1" value="Make a choice">
       <label for="checkbox1">Make a choice</label>
 </div>
 
 <div class="formfield-checkbox">
      <input type="checkbox" id="checkbox2" value="Or another">
      <label for="checkbox2">Or another</label>
 </div>

Ce qui nous donne, sans aucun style :

Attention ! Il très important de ne pas oublier l’attribut for pour les labels (relatif à l’ID de l’input), afin que ces derniers soient cliquables.

Et un peu de CSS

Maintenant vous stylez le formulaire, préparez vos images de remplacement (j’ai personnellement préparé un sprite svg contenant tous les états des boutons) et voilà comment nous allons procéder :

Le conteneur en position relative, définira le cadre de la position des éléments enfants :

.formfield-checkbox {
      position: relative;
}

La case à cocher sera rendue invisible et positionnée en absolu :

.formfield-checkbox input[type="checkbox"] {
      visibility: hidden; 
      position: absolute; top: 0; left: 0;
}

Ensuite nous allons intégrer notre graphisme dans le pseudo-élément ::before du label juxtaposé à l’input, et décaler ce dernier en conséquence avec un padding :

.formfield-checkbox input[type="checkbox"]   label {
      padding: 4px 0 0 24px;
}

.formfield-checkbox input[type="checkbox"]   label::before {
      content: " ";
      display: inline-block; width: 20px; height: 20px;
      position: absolute; top: 0; left: 0;
      background: transparent url(../img/sprite.svg) 0 -30px no-repeat;
}

Et enfin pour l’état sélectionné, nous utiliserons le sélecteur :checked :

.formfield-checkbox input[type="checkbox"]:checked   label::before {
      background-position: -30px -30px;
}

Ce qui nous donnera de très belles cases à cocher 🙂

Ensuite on peut répéter l’opération pour les boutons radio, en changeant la classe du conteneur !

Voir la démo

J’utilise cette technique depuis la mise à jour de Prid’ mon framework CSS.
Niveau rétro-compatibilité, cette astuce fonctionne pour tous les navigateurs modernes, et concernant Internet Explorer, à partir de la version 9. Il est donc préférable de prévoir un affichage des input standards pour IE 7 et 8…

Dans un prochain article nous verrons comment styler simplement les menus déroulants : les fameux select.

Téléchargez ce tutoriel