Apprendre à personnaliser une checkbox en CSS
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00
Sous-titres non disponibles
43m17
de formation
8
leçons vidéo
1
chapitre
Débutant
niveau requis
Carl Brison
Carl Brison
Formateur certifié

Apprendre à personnaliser une checkbox en CSS

4.8/5 Trustpilot (1399 avis) Satisfait ou remboursé
43m17
de formation
8
leçons vidéo
1
chapitre

Dans ce tuto CSS en vidéo, nous allons apprendre comment modifier totalement l'apparence d'une case à cocher, aussi appelée "checkbox".

Par défaut, une case à cocher est interprétée par un navigateur, comme étant un petit carré gris qui a une petit coche noire lorsque celle-ci est cochée par l'utilisateur. Cet élément est généralement utilisé dans les formulaires de sites Internet.
Grâce à l'utilisation astucieuse du langage CSS, nous allons modifier à notre guise l'apparence des cases à cocher afin de leur donner une forme, une taille et une couleur qui seront personnalisées.

Nous ferons de même avec les boutons radios.

Je mets à votre disposition, l'ensemble du code utilisé dans ce tuto.
Un QCM vous sera proposé en fin de formation et vous permettra de valider les connaissances théoriques acquises pendant la formation.
Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions sur ce cours.

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Leçon 1
Création du formulaire en HTML
Leçon 2
Mise en forme CSS 1/2
Leçon 3
Mise en forme CSS 2/2
Leçon 4
Création d'une case à cocher
Leçon 5
Mise en place du check de la case à cocher
Leçon 6
Création du formulaire en bouton radio
Leçon 7
Modification des boutons radios

Table des matières

Leçon 1

Création du formulaire en HTML

05m10
Leçon 2

Mise en forme CSS 1/2

08m01
Leçon 3

Mise en forme CSS 2/2

07m36
Leçon 4

Création d'une case à cocher

05m39
Leçon 5

Mise en place du check de la case à cocher

07m31
Leçon 6

Création du formulaire en bouton radio

02m58
Leçon 7

Modification des boutons radios

05m13
Leçon 8

Conclusion

01m09

Aperçus

Avis des apprenants

Détail des avis
4
Commentaires
5/5
Note moyenne
5/5
4
4/5
0
3/5
0
2/5
0
1/5
0
Alain Tardif
Alain Tardif
Publié le 07/09/2023
Merci Carl pour ce cours sur la personnalisation d'une checkbox en CSS ! Grâce aux pseudo-classes et pseudo-éléments, j’ai pu transformer ces petits carrés fades en éléments stylés et interactifs. Mention spéciale au `::before` bien exploité pour simuler l’apparence, un vrai tour de magie CSS. Prochaine étape : rendre mes checkboxes aussi appétissantes que la pizza Calzone 😃 ! Validé 100%.
Carl Brison
Carl Brison
Merci Alain pour votre commentaire très gentil ainsi que votre bonne humeur ;-)
Eric Reynaud
Eric Reynaud
Publié le 05/04/2023
Merci Carl pour ce nouveau tuto super intéressant ! Vous êtes GENIAL ! Continuez à nous régaler, A bientôt, Eric.
Carl Brison
Carl Brison
Merci beaucoup Eric, vous êtes super gentil ;-)
Valérie Arno
Valérie Arno
Publié le 22/09/2020
Encore un petit tuto qui nous permettra de rendre nos formulaires plus attrayants. C'est tout de même plus agréable que ces tout petits boutons des navigateurs qu'on a parfois du mal à viser avec le pointeur (pour moi en tout cas). Merci Carl. :-)
Carl Brison
Carl Brison
Merci beaucoup pour votre commentaire très gentil ;-)

Vos questions sur le cours

Que contient le fichier source ?

L'ensemble des codes utilisés dans ce tuto.

Quel est le niveau requis pour suivre ce tuto ?

débutant

Deux façons de suivre cette formation

À l'unité
Pour vous former sur ce sujet précis
8,99€
Paiement unique, sans abonnement
Accès à vie à cette formation
43m17 de vidéo • 1 chapitre
Satisfait ou remboursé voir conditions
Accès immédiat après paiement
Avec l'abonnement
Pour progresser en continu
34,90€ /mois
Sans engagement
Cette formation + 6 791 autres en illimité
Plus de 20 nouvelles formations par mois
Résiliable en 1 clic, à tout moment
Commencer avec l’abonnement
Accès immédiat, pendant votre abonnement

Inclus dans les deux formules

  • Hors connexion via l'app Tuto.com
  • Salon d'entraide pour vos questions
  • Certificat de complétion
Paiement sécurisé 1,4 million d'apprenants 4.8/5 Trustpilot
Logo carte-bancaire-monoLogo visa-monoLogo mastercardLogo paypal-monoLogo klarna-monoLogo apple-pay-monoLogo google-pay-mono
Une question avant de choisir ? Écrivez-nous ou appelez le 01 84 80 80 29 (du lundi au vendredi, 10h-12h et 14h-16h)

Formations complémentaires

Les apprenants qui suivent cette formation s'intéressent aussi à :

Abonnement 34,90€/mois

Attendez ! 🤗

Accédez à plus de 1426 tutos gratuits

Notre politique de protection des données