Astuce : Faciles, cases à cocher et boutons radio en CSS3

() translation by (you can also view the original English article)

Vous êtes-vous déjà demandé comment styler les boutons radio et les cases à cocher, mais sans JavaScript ? Grâce aux CSS3 vous le pouvez ! Voici ce que nous allons construire :

Si vous cherchez des images à utiliser avec les éléments d’UI de votre formulaire, jetez un œil aux kits d’interface utilisateur disponibles sur Envato Elements. Sinon, prenez une tasse de café et lancez-vous avec ce tutoriel !

1. Comprendre le processus

Lecture recommandée : Les 30 sélecteurs CSS que vous devez mémoriser

Pour ceux d'entre vous qui vous sentez confiant en vos capacités CSS et voulez juste un coup de pouce dans la bonne direction, voici la ligne de CSS la plus importante de tout le tutoriel :

1	input[type="checkbox"]:checked + label {
2
3	}

Maintenant, pour ceux d'entre vous qui pensent qu'ils pourraient avoir besoin de plus d’orientation, ne craignez rien, continuer à lire !

Bon, revenons à nos moutons, maintenant. Qu'est-ce que nous allons exactement faire ? Eh bien, en raison de CSS3 du pseudo sélecteur plutôt astucieux :checked, nous sommes en mesure de cibler un élément basé sur son état coché (ou non). Ensuite, nous pouvons utiliser le sélecteur de frères adjacents + de la spécification CSS 2.1 pour cibler l’élément suivant directement la case à cocher ou le bouton radio, qui, dans notre cas, correspond à l’étiquette (label).

2. Mise en place de notre HTML

Maintenant, nous commençons en créant nos fichiers HTML et CSS (ou quelque soit l'endroit où vous préférez gérer vos styles) et nous nous mettons au travail. Je supposerai que vous savez comment faire cela, alors nous n’aurons pas à nous y attarder.

Dans le but de vous mettre sur la voie, je démontrerai seulement cette technique sur une case à cocher, mais le processus pour les boutons radio est identique et est inclus dans le source.

Bon d’accord, nous allons effectivement commencer, ok ? Nous commençons par créer notre entrée de case à cocher, suivie d’une étiquette.

1	<input type="checkbox" />
2	<label>Styled Check Box</label>

Maintenant, juste au cas où vous n'en savez pas beaucoup sur l’élément <label>, vous devez connecter l’entrée et l’étiquette afin que vous puissiez interagir avec l’entrée par le biais de l’étiquette. Ceci est fait en utilisant, for = "" et l’ID de l’entrée

1	<input type="checkbox" id="c1" name="cc" />
2	<label for="c1">Check Box 1</label>

J’ajouterai aussi un <span> à l’intérieur de l’étiquette, ce qui est plus une préférence personnelle qu’autre chose, mais tout s’éclaircira à l’étape 3.

3. Ce pour quoi nous sommes là : CSS

C’est là que le plaisir commence. La première chose que nous faisons, qui est la base pour ce tutoriel complet, est de masquer la case à cocher réel.

1	input[type="checkbox"] {
2	display:none;
3	}

Maintenant que c’est fait, nous pouvons styler l’étiquette (label), mais plus précisément la balise span à l’intérieur de l’étiquette. Je le fais de cette façon afin de me donner plus de contrôle sur la position exacte de la case à cocher. Sans cela, il vous faudrait probablement utiliser une image d’arrière-plan dans l’étiquette directement et le positionnement peut devenir difficile.

input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    background:url(check_radio_sheet.png) left top no-repeat;
}

Bon, je voudrais expliquer cela rapidement. Tout d’abord, notez l'arrière-plan. J’ai une petite feuille sprite pour ces derniers, donc tout ce que je dois faire c'est de régler la position de cet arrière-palan sur ce span. La balise span elle-même est la largeur exacte et la hauteur de chaque « sprite » dans la feuille, rendant facile la définition de chaque état.

Our sprite sheet — Notre feuille de sprite

Voici le reste du CSS, spécifique à mon style. C’est purement pour l’esthétique et spécifique à mon goût ou à ce design.

input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-2px 10px 0 0;
    vertical-align:middle;
    background:url(check_radio_sheet.png) left top no-repeat;
    cursor:pointer;
}

4. Faites-le fonctionner

Il n’y a pas trop de travail restant à faire, nous allons donc tout mettre ensemble. La dernière chose que vous devez faire est de fournir un état de l’élément lorsque l’entrée est cochée et éventuellement aussi pour le survol. C’est assez simple, il suffit de jeter un coup d’oeil !

input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-2px 10px 0 0;
    vertical-align:middle;
    background:url(check_radio_sheet.png) left top no-repeat;
    cursor:pointer;
}
input[type="checkbox"]:checked + label span {
    background:url(check_radio_sheet.png) -19px top no-repeat;
}

Notez que j’ai utilisé une feuille de sprite, tout ce que je dois faire est de changer la position de fond. Remarquez, aussi, que tout ce que je devais faire pour styler le span de l’étiquette pour quand vous « cochez » une case à cocher/bouton radio, a été d'utiliser le pseudo sélecteur CSS3 :checked.

Note rapide sur le support du navigateur

Les pseudo sélecteurs sont bien pris en charge dans tous les navigateurs, mais les restrictions habituelles s’appliquent, et le fallback est assez gracieux :

Can I use data for pseudo selectors — Puis-je utiliser les données pour les pseudo sélecteurs généraux

IE9 on Windows 7 — Fallback : IE9 sur Windows 7

Les anciens navigateurs mobiles sont un problème aussi - la prise en charge de :checked n’est pas claire. Safari Mobile pré iOS 6 ne le supporte pas, par exemple.

Conclusion

Très bien, donc nous avons terminé, n'est-ce pas ? Eh bien disons que nous allons vérifier une deuxième. Premièrement le code HTML :

1	<input type="checkbox" id="c1" name="cc" />
2	<label for="c1"><span></span>Check Box 1</label>

Le vôtre semble-t-il pareil ? N’oubliez pas d’y ajouter cette balise <span> ! Lorsque vous expérimentez cela vous-même, je vous suggère fortement de trouver des façons nouvelles ou différentes d'exécuter cette partie. Je serais ravi de voir ce que vous proposer pour le rendre plus efficace. Maintenant le CSS :

input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-2px 10px 0 0;
    vertical-align:middle;
    background:url(check_radio_sheet.png) left top no-repeat;
    cursor:pointer;
}
input[type="checkbox"]:checked + label span {
    background:url(check_radio_sheet.png) -19px top no-repeat;
}

Tout est-il présent ? Parfait. N’oubliez pas que la majorité de ce style est spécifique au style que j’ai créé pour les fichiers de démonstration. Je vous encourage à créer les vôtres et à expérimenter avec le placement et la présentation.

En conclusion, la chose la plus importante dont vous devez tenir compte c’est la toute première ligne de CSS que j’ai écrite tout en haut :

1	input[type="checkbox"]:checked + label {
2
3	}

En utilisant cela, vous pouvez créer tout un ensemble de choses différentes. Les possibilités avec :checked allant au-delà des cases à cocher et des boutons radios pour utilisation dans les formulaires, mais je vous laisse expérimenter de vous-même. Des choses à expérimenter avec :

Ajouter une spritesheet 2x pour les écrans retina
Utiliser le SVG au lieu d’une image bitmap

J’espère que vous avez aimé ce court article et j’espère que vous prendrez ce que vous voyez ici pour le développer ou l'améliorer !