Softonic

Générateur de case à cocher CSS

Étape 1 / 2
Résultats

Les cases à cocher par défaut ont un rendu différent sur chaque système d’exploitation et sont difficiles à personnaliser. Ce générateur crée du CSS pur qui donne à une case native l’apparence souhaitée : choisissez la couleur de l’état coché, la couleur de bordure, la taille et le rayon des angles. Comme le style s’applique à un vrai champ, la navigation au clavier, les lecteurs d’écran et l’envoi du formulaire continuent de fonctionner. Copiez le CSS généré et ajoutez-le à votre feuille de style.

Comment styliser une case à cocher

  1. 1

    Choisir les couleurs

    Choisissez la couleur de fond pour l’état coché et la couleur de bordure de la case.

  2. 2

    Définir la taille

    Choisissez une taille entre 12 et 48 px.

  3. 3

    Définir la forme

    Choisissez le rayon des angles de la case, jusqu’à 20 px.

  4. 4

    Copier le CSS

    Prévisualisez la coche et copiez la règle générée dans votre feuille de style.

Ce que fait le CSS généré

La règle s’applique directement au champ avec appearance: none, qui retire l’apparence par défaut pour que la case puisse être stylisée :

.checkbox {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #d1d5db;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  transition: all 0.15s ease;
}

Lorsque la case est cochée, elle se remplit avec la couleur choisie et une coche blanche apparaît, dessinée en CSS :

.checkbox:checked {
  background: #10b981;
  border-color: #10b981;
}
.checkbox:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 6px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

Pourquoi un champ natif

Le style ne remplace jamais l’élément par un div : le vrai <input type="checkbox"> conserve son activation au clavier, sa prise en charge par les lecteurs d’écran et l’envoi du formulaire. appearance: none ne change que son apparence. Si vous devez prendre en charge d’anciennes versions de Safari, ajoutez -webkit-appearance: none à la règle.

Focus et survol

La règle générée inclut une transition de couleur fluide, mais aucun style de survol ou de focus. Ajoutez vos propres règles :hover et :focus-visible pour que les utilisateurs du clavier voient toujours où se trouve le focus, par exemple un contour coloré autour de la case.

La coche

La coche est une petite ligne blanche pivotée de 45 degrés. Si vous avez besoin d’une autre couleur ou d’un trait plus fin ou plus épais, modifiez les valeurs border et border-width dans la règle ::after.

Questions fréquentes

Non. Il produit uniquement du CSS. Appliquez la classe à une vraie case à cocher de votre formulaire, avec ou sans libellé visible.

Oui. La règle utilise appearance: none sur le champ natif, donc la valeur est envoyée normalement et le clavier ainsi que les lecteurs d’écran restent pris en charge.

La taille se règle dans le générateur, de 12 à 48 px. La couleur et l’épaisseur de la coche se modifient dans la règle ::after du CSS généré.

Pour les cibles tactiles, visez au moins 24 px, idéalement 44 px comme les autres contrôles. Gardez la case alignée avec le texte du libellé dans votre design.

Outils similaires

Référence de la table ASCII

Table ASCII complète de 0 à 127 avec décimal, hexadécimal, octal, binaire et référence numérique HTML pour chaque caractère, y compris les codes de contrôle comme NUL, LF et DEL.

Référence des caractères HTML

Liste consultable des entités HTML, de leurs codes nommés et numériques, et un copier-coller en un clic pour les caractères et symboles spéciaux.

Générateur de carte CSS

Créez le CSS d’un conteneur de carte : fond, bordure, rayon des angles, espacement intérieur et ombre douce, avec aperçu immédiat et code à copier-coller.

Référence des raccourcis clavier

Recherchez les raccourcis par défaut documentés de VS Code, Chrome et Bash avec GNU Readline sous macOS, Windows et Linux.

Générateur d’accordéon CSS

Créez un accordéon de trois sections avec details et summary. Personnalisez textes, couleurs, espacements, icône et ouverture, puis copiez ou téléchargez le code.

Recherche de nom de couleur

Trouvez la couleur nommée CSS standardisée la plus proche d’une valeur HEX, RGB ou HSL grâce à l’écart CIEDE2000.

Outil disponible dans d’autres langues