Sélectionner une page


Dans cet article, nous allons voir comment nous pouvons personnaliser une case à cocher avec CSS que nous animons également afin qu’elle effectue une action ou un mouvement à chaque fois que l’utilisateur clique dessus.

N’oubliez pas que cet article fait partie d’un mini-guide:

  1. Sélectionnez des boutons radio personnalisés, des cases à cocher et Utilisation de CSS
  2. Personnaliser un bouton radio avec CSS
  3. Personnalisez une case à cocher avec CSS et animez-la
  4. Personnaliser une sélection avec CSS

Comment personnaliser notre case à cocher avec CSS comme je vous l’ai dit dans le premier article de ce mini-guide; Sélectionnez des boutons radio personnalisés, des cases à cocher et Utilisation de CSS nous devrons les cacher. Nous allons ajouter une étiquette <i> dans celabel> où est le nôtre checkbox. Et avec les pseudo-classes :before du label <i> nous dessinerons le nôtre checkbox personnalisé.

Masquer les entrées avec CSS

Pour masquer les entrées en premier, nous appliquons la propriété et la valeur de css appearence:none. Cela indique aux navigateurs de ne pas utiliser d’apparence par défaut, et cela nous permet de modifier leur CSS.

Après avoir utilisé cette propriété et cette valeur visibility:hidden pour masquer les entrées. Peu importe ce que checkbox n’est pas visible car à chaque fois que nous cliquons sur l’étiquette <label> Ceci est activé.

CSS

CSS

Comment puis-je personnaliser une case à cocher avec CSS?

Avec ce code, nous dessinerions cette forme:

Passons maintenant au pseudo-élément: avant d’ajouter le « bouton »:

Résultat

Exemple: case à cocher personnalisée avec des couleurs et des formes

Ajouter un mouvement lorsque l’utilisateur clique sur la case à cocher

La case à cocher et les boutons radio ont une pseudo-classe :checkedAvec cela, nous pouvons définir les propriétés CSS et les valeurs de ces éléments dans leur état normal et sélectionné.

Avec le code suivant, nous déplaçons l’élément vers la droite lorsque vous cliquez dessus, tandis qu’avec la deuxième partie du code, nous changeons la couleur de l’arrière-plan.

Résultat: personnaliser une case à cocher avec CSS

Ajoutez «ON» à notre case à cocher personnalisée

Enfin, nous allons ajouter le mot A lorsque notre bouton est sélectionné. Nous utilisons le pseudo élément pour cela :after

Résultat

  1. Sélectionnez des boutons radio personnalisés, des cases à cocher et Utilisation de CSS
  2. Personnaliser un bouton radio avec CSS
  3. Personnalisez une case à cocher avec CSS et animez-la
  4. Personnaliser une sélection avec CSS

Téléchargez cette case à cocher et utilisez-la dans vos projets





Source link

Recent Posts