Maison / Technologie / Piratage des cases à cocher et des radios personnalisées

Piratage des cases à cocher et des radios personnalisées

Améliorations cosmétiques des cases à cocher et des radios utilisant CSS

Radios (ou boutons radio) et les cases à cocher sont des éléments d’entrée très importants que l’on trouve souvent sous tant de formes sur le Web.

Cases à cocher sont utilisés lorsque plusieurs valeurs d'une liste de valeurs prédéfinies peuvent s'appliquer – par exemple, marquer plusieurs fichiers pour suppression dans une liste de fichiers.

Boutons radio en revanche, ils sont utilisés lorsqu'une seule valeur est applicable – par exemple, la sélection du sexe dans une liste.

Dans ce didacticiel, nous allons examiner, en utilisant une approche pas à pas, comment améliorer l'esthétique et l'apparence des radios et des cases à cocher en utilisant CSS tout en préservant l'accessibilité des éléments d'entrée.

Pour apprécier pleinement ce didacticiel, une compréhension de base de CSS – sélecteurs et règles de style est requise. Cependant, il n’est pas nécessaire que vous soyez un expert en CSS pour suivre.

Motivation

En ce qui concerne les apparences, les radios et les cases à cocher sont un peu gênants et incohérents d’un navigateur à l’autre. Souvent, une apparence uniforme est souhaitée pour les cases à cocher et les boutons radio, quel que soit le navigateur utilisé.

La plupart des frameworks CSS comme Bootstrap fournissent déjà un style personnalisé pour l'apparence de ces éléments d'entrée. Cependant, si vous n'utilisez pas de framework CSS, vous devrez peut-être personnaliser vos propres cases à cocher et boutons radio – d'où ce tutoriel.

Plan de conception

Voici un aperçu des étapes à suivre afin de créer un bouton radio personnalisé ou une case à cocher. Dans cette liste, je continuerai à me référer à un case à cocher ou bouton radio comme on vient de élément d'entrée.

  • Assurez-vous d'avoir une étiquette pour l'élément d'entrée.
    Envelopper l'élément d'entrée avec un élément et attachez un texte d'étiquette pour l'élément d'entrée si nécessaire. Ceci est également utile pour maintenir l'accessibilité de l'élément d'entrée.
  • Ajoutez l'élément de personnalisation après l'élément d'entrée.
    L'élément de personnalisation est un élément vide qui contiendra tous les styles pour l'apparence personnalisée de l'entrée. Il doit venir après l'élément input et ils doivent tous deux avoir le même élément parent.
  • Faites disparaître l'élément d'entrée natif.
    Ajoutez les styles nécessaires pour empêcher la présentation visuelle de l'élément d'entrée natif.
  • Personnalisez tout ce que vous voulez.
    Ajoutez les styles nécessaires à l'élément de personnalisation pour obtenir l'aspect personnalisé souhaité de l'entrée. Utilisez la pseudo-classe: checked pour ajouter des styles en fonction de l'état vérifié de l'élément d'entrée. Le contenu généré par CSS peut être utilisé si nécessaire, en exploitant les pseudo-éléments :: before et :: after.

la mise en oeuvre

Nous allons maintenant mettre en œuvre nos personnalisations en fonction des plans de conception que nous venons de voir. Nous allons commencer par un balisage minimaliste pour l’élément d’entrée personnalisé, puis pour les styles.

Balisage de base

Voici un exemple de code HTML de balisage pour l'élément d'entrée.

https://medium.com/media/c653d982e58e4e5b98776d84858c2065/href

L'élément de case à cocher ici est défini avec une classe check-custom. L'élément de personnalisation pour la case à cocher se voit attribuer une classe de check-toggle.

L'utilisation de classes de cette manière facilite l'activation ou la désactivation de la personnalisation. Par exemple, si la classe check-custom n'est pas transmise, la case à cocher native est affichée.

Masquer l'élément natif

Vous pouvez facilement attacher l'attribut masqué à l'élément en entrée pour l'empêcher d'être présenté visuellement de la manière suivante:

<input type = "checkbox" class = "check-custom" caché>

Cependant, cela devrait être découragé. Les styles CSS doivent plutôt être utilisés pour masquer l'élément d'entrée natif.

Voici une définition de style simple pour vous assurer que l'élément d'entrée natif n'est pas présenté de manière visuelle.

https://medium.com/media/52bb032a209b6a1fb393f5a2345fdf03/href

Ici, un sélecteur d'attribut et un sélecteur de classe .check-custom sont utilisés avec le sélecteur de type d'entrée pour garantir que les styles s'appliquent uniquement aux cases à cocher de la classe spécifiée.

Personnaliser la case à cocher

Tout d'abord, nous allons ajouter les styles de base pour l'apparence de la case à cocher comme suit:

https://medium.com/media/41068c5ab37b5334fa42f37c19a6cc09/href

Remarquez comment combinateur général (A ~ B) a été utilisé dans le sélecteur pour cibler l'élément de personnalisation après l'élément d'entrée. Le voici encore:

contribution[type='checkbox'].check-custom ~ .check-toggle

Ce sélecteur correspond à tout élément avec une classe check-toggle, qui est un frère direct de et qui vient après tout élément d'entrée de case à cocher avec une classe check-custom.

Enfin, il est temps d’ajouter des styles pour les différents états de la case à cocher.

https://medium.com/media/14dc5929dd5a46c5a7d107f3a4f3efd6/href

Notez ici que j’ai utilisé un SVG intégré d’une coche blanche en plus d’une couleur dérivée bleue comme arrière-plan de la case à cocher personnalisée lorsqu’elle est cochée.

Bien que j'aie utilisé des styles très simples ici, c'est à vous de choisir le style nécessaire à la personnalisation souhaitée.

Voici les styles complets pour la case à cocher personnalisée:

https://medium.com/media/bf297458a62fc982f54bf3355dbf1491/href

Démo de comparaison

Voici une démo très simple, comparant les apparences des cases à cocher personnalisées et natives. (UNEDes styles supplémentaires ont été appliqués pour faciliter la présentation visuelle)

Implémentation du bouton radio personnalisé

Nous avons déjà vu une implémentation pour une case à cocher personnalisée. Voyons rapidement comment implémenter un bouton radio personnalisé en suivant le schéma de conception présenté précédemment.

Balisage de base

Voici un exemple de balisage HTML pour le bouton radio.

https://medium.com/media/7973f40c084228fb0ca5d299218ecb22/href

Ici, nous avons changé le type d’entrée en radio. Nous avons également conservé les noms de classe sur les éléments pour des raisons de cohérence.

Avant de commencer à écrire les styles pour notre bouton radio personnalisé, laissez-nous avoir une idée juste de ce à quoi notre bouton radio devrait ressembler.

Voici une comparaison côte à côte entre l’apparence de notre bouton radio personnalisé et celui du bouton natif.

Styliser le bouton radio

La capture d'écran ci-dessus montre que notre bouton radio personnalisé a quelque chose qui ressemble à une petite case en son milieu lorsqu'il est coché.

Pour créer cette case pour l'état coché, nous allons utiliser le pseudo-élément :: after de l'élément de personnalisation.

Tous les autres styles sont presque identiques à ce que nous avons vu auparavant pour la case à cocher. Voici les styles nécessaires pour créer notre bouton radio personnalisé.

https://medium.com/media/127c8fcbd1d61cdfbeeb2656e4802f45/href

Notez ici que nous utilisons maintenant l’entrée[type=’radio’] sélecteur de base pour vous assurer que nous ne ciblons que les boutons radio. Rappelez-vous à nouveau que c’est à vous de définir le bouton radio personnalisé comme bon vous semble.

Étude de cas: Interrupteur à bascule

Il existe quelques cas d'utilisation de cases à cocher personnalisées et de boutons radio qui peuvent ne pas être aussi évidents. L'un d'entre eux est le interrupteur à bascule.

UNE interrupteur à bascule peut être vu comme une case à cocher qui bascule entre deux valeurs en fonction de son état coché ou non coché – ayant habituellement l’apparence d’un commutateur.

Nous pouvons modifier les styles de l'élément de personnalisation de notre case à cocher personnalisée pour lui donner l'apparence d'un commutateur.

Le balisage

Commençons par une modification simple du balisage afin d’ajouter une classe de commutateurs à bascule à l’élément d’entrée. Voici ce que c'est:

https://medium.com/media/d2493725f8f9527d5963d3dedba76591/href

Case à cocher – Pourquoi pas la radio?

Notez que, dans le balisage du commutateur à bascule, nous utilisons une case à cocher de type d’entrée pour le commutateur à bascule. Une bonne question sera – «Pouvons-nous aussi utiliser un élément d'entrée radio?

La réponse est non. La raison en est la différence entre le comportement d'un bouton radio et celui d'une case à cocher lorsqu'ils sont déjà cochés.

Un bouton radio seul ne peut pas être décoché par simple interaction de l'utilisateur lorsqu'il est déjà coché. Par conséquent, il n'est pas idéal pour une utilisation en tant qu'interrupteur à bascule.

Cette simple démonstration montre la différence entre l’utilisation d’un bouton radio et d’une case à cocher comme base d’un commutateur à bascule.

Les styles

Nous allons apporter quelques modifications aux styles de l'élément de personnalisation afin de lui donner l'aspect d'un commutateur.

Un commutateur typique consiste en un cadre extérieur Et un curseur intérieur qui s'aligne à gauche ou à droite du cadre en fonction de l'état du commutateur.

Pour réaliser cette conception, nous allons tirer parti des pseudo-éléments :: before et :: after de l'élément de personnalisation. Le pseudo-élément :: before sera le cadre externe, tandis que le pseudo-élément :: after sera le curseur interne.

L’interrupteur à bascule résultant ressemblera à la capture d’écran suivante –(Des styles supplémentaires ont été appliqués pour faciliter la présentation visuelle)

Voici les styles pour le commutateur à bascule:

https://medium.com/media/9d1e3d98a9e9b6e9dc8ac73cf4d500ed/href

A propos de l'accessibilité

Pour toutes les personnalisations que nous avons effectuées dans ce didacticiel, nous avons pu nous assurer que nos boutons radio et nos cases à cocher personnalisés restent accessibles – ce qui est un très bon exploit en passant. Par conséquent, la mise au point par onglet et toutes les autres caractéristiques d'accessibilité des éléments d'entrée sont préservées.

Cela a été possible grâce à la présence du élément contenant les éléments d'entrée. Par conséquent, souvenez-vous toujours de placer votre élément d’entrée et l’élément personnalisé dans un

Une autre amélioration importante sur l'accessibilité de nos éléments personnalisés consistera à ajouter un texte ou un élément fournissant une étiquette lisible – en utilisant l'une des options suivantes:

  • un élément enfant ou un texte dans le parent
  • un texte d'étiquette masqué spécifié à l'aide de l'attribut aria-label.
  • un élément séparé lié à l'élément d'entrée en utilisant l'attribut aria-labelledby.

Toujours sur les attributs ARIA, vous pouvez également utiliser l'attribut aria-vérifié avec le contrôle de base pour indiquer l'état activé des éléments d'entrée.

Pour le commutateur à bascule, vous devez ajouter le rôle de rôle ARIA = "commutateur" à l'élément input pour indiquer qu'il s'agit d'un commutateur à bascule.

Conclusion

Enfin, nous arrivons à la fin de ce didacticiel et nous avons vu un schéma de conception très simple qui peut nous guider pour apporter des modifications esthétiques aux boutons et cases à cocher de radio natifs avec uniquement du CSS, tout en préservant leur accessibilité.

Comme indiqué dans le tutoriel, vous n'êtes pas limité aux styles de personnalisation utilisés dans le tutoriel. En fait, il vous appartient de personnaliser les éléments personnalisés à votre convenance.

Clap & Suivre

Si vous trouvez cet article intéressant, n'hésitez pas à applaudir si cela ne vous dérange pas.

Tu devrais me suivre sur Moyen (Glad Chinda) pour des mises à jour sur des articles plus perspicaces comme celui-ci. Vous pouvez aussi me suivre sur monGazouillement manipuler (@gladchinda).

Profitez du codage…


Piratage des cases à cocher et des radios personnalisées a été publié à l'origine dans Hacker midi sur Medium, où les gens poursuivent la conversation en soulignant et en répondant à cette histoire.



Source

A propos newstrotteur-fr

Découvrez également

Un dirigeant de Bristol-Myers Squibb explique comment Seattle peut développer et conserver de grandes sociétés de biotechnologie – Newstrotteur

Henrik Andersen, responsable du développement des produits biologiques chez Bristol-Myers Squibb. (Newstrotteur Photo / James …

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Do NOT follow this link or you will be banned from the site!