Styliser une case à cocher en HTML/CSS

Pourquoi personnaliser les checkboxes

Par défaut, les navigateurs appliquent leurs propres styles aux cases à cocher. Le problème : chaque navigateur a son propre design, ce qui crée une incohérence visuelle. En tant que développeur web, vous voulez une expérience utilisateur cohérente sur tous les navigateurs et appareils.

La bonne nouvelle : il est possible de styliser complètement une checkbox en HTML et CSS uniquement, sans JavaScript. Cela permet :

• Un design cohérent sur tous les navigateurs
• Une adaptation au branding de votre site
• Des transitions et animations fluides
• Une meilleure accessibilité avec les bons attributs HTML

Utiliser appearance: none

La propriété CSS appearance: none supprime le style par défaut du navigateur sur l'élément <input type="checkbox">. C'est la base de toute personnalisation.

/* Supprimer le style par défaut */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  /* Propriétés de base */
  width: 20px;
  height: 20px;
  border: 2px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  outline: none;
}

Les préfixes -webkit- et -moz- garantissent la compatibilité avec les navigateurs Firefox et Safari. Une fois appearance: none appliqué, vous pouvez styliser la checkbox comme n'importe quel élément HTML.

Stylisation de base

Voici un exemple complet avec des couleurs et une apparence moderne :

/* Checkbox stylisée - état normal */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #007bff;
  border-radius: 4px;
  cursor: pointer;
  background-color: #fff;
  transition: all 0.2s ease;
}

/* État cochée */
input[type="checkbox"]:checked {
  background-color: #007bff;
  border-color: #0056b3;
}

/* État désactivée */
input[type="checkbox"]:disabled {
  border-color: #ccc;
  cursor: not-allowed;
  background-color: #f5f5f5;
}

Dans cet exemple :

• État normal : fond blanc avec bordure bleu clair
• État cochée : fond bleu avec bordure plus foncée
• État désactivée : couleurs grisées et curseur non-allowed

La propriété transition: all 0.2s ease crée une animation fluide lors du changement d'état.

États interactifs et transitions

Pour une meilleure UX, ajoutez les pseudo-classes :hover et :focus :

/* Survol */
input[type="checkbox"]:hover:not(:disabled) {
  border-color: #0056b3;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}

/* Focus (important pour l'accessibilité) */
input[type="checkbox"]:focus {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

/* Cochée ET hovérée */
input[type="checkbox"]:checked:hover:not(:disabled) {
  background-color: #0056b3;
  box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.25);
}

/* Cochée ET focus */
input[type="checkbox"]:checked:focus {
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5);
}

L'utilisation de box-shadow crée un effet de "glow" au lieu d'un outline standard, ce qui est plus esthétique. Le pseudo-sélecteur :not(:disabled) évite d'appliquer le hover sur les checkboxes désactivées.

Checkboxes avec icônes et SVG

Pour un design plus sophistiqué, ajoutez une icône (✓) quand la case est cochée, en utilisant ::before ou ::after :

/* Checkbox avec checkmark */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  border: 2px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease;
}

/* Ajouter le checkmark avec ::after */
input[type="checkbox"]::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: none;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Afficher le checkmark quand cochée */
input[type="checkbox"]:checked {
  background-color: #28a745;
  border-color: #1e7e34;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="white" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"></path></svg>');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 60%;
}

L'icône est définie comme une image SVG inline (data URI) pour éviter une requête HTTP supplémentaire. Cela fonctionne parfaitement sur tous les navigateurs modernes.

Exemples avancés

Checkbox avec couleurs dégradées :

input[type="checkbox"]:checked {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-color: #764ba2;
}

Checkbox avec animation de scale :

input[type="checkbox"] {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

input[type="checkbox"]:checked {
  transform: scale(1.1);
  background-color: #007bff;
}

Checkbox de grande taille pour mobile :

input[type="checkbox"] {
  width: 24px;
  height: 24px;
  min-width: 44px;
  min-height: 44px;
  padding: 10px;
}

La règle min-width: 44px et min-height: 44px suit les recommandations d'accessibilité mobile (zone de cliquage d'au moins 44x44 pixels).