Accentsconagua
Share
Vous êtes-vous déjà demandé comment styliser les cases à cocher et les boutons radio, mais sans JavaScript? Merci à CSS3, vous pouvez! Voici ce que nous allons construire (Remarque: pour apprendre à les rendre accessibles, consultez également ce tutoriel):
Si vous recherchez des graphismes à utiliser avec vos éléments d'interface utilisateur de formulaire, consultez les kits d'interface utilisateur disponibles dans Envato Elements. Sinon, prenez une tasse de café et commencez avec ce tutoriel!
Lecture recommandée: Les 30 sélecteurs CSS que vous devez mémoriser
Pour ceux d'entre vous qui se sentent déjà confiants dans vos compétences CSS et qui veulent juste un coup de pouce dans la bonne direction, voici la ligne de CSS la plus importante de tout le tutoriel:
input [type = "checkbox"]: vérifié + libellé
Maintenant, pour ceux qui pensent avoir besoin de plus de direction, ne craignez rien, continuez.!
Bon, revenons maintenant au sujet. Que ferons-nous exactement? Eh bien, en raison de l'insuffisant petit CSS3 :vérifié pseudo sélecteur, nous sommes en mesure de cibler un élément en fonction de son statut coché (ou non coché). Nous pouvons alors utiliser le + sélecteur de fratrie adjacent de CSS2.1 pour cibler l'élément directement après la case à cocher ou la radio, qui dans notre cas est l'étiquette.
Maintenant, nous commençons par créer nos fichiers HTML et CSS (ou comme vous préférez gérer vos styles) et nous nous mettons au travail. Je suppose que vous savez comment faire cela, de sorte que nous n'aurons pas à y entrer.
Afin de vous mettre sur la bonne voie, je ne démontrerai cette technique que sur une case à cocher, mais le processus pour les boutons radio est identique et est inclus dans le source..
Bon, commençons réellement alors, allons-nous? Nous commençons par créer notre entrée de case à cocher, suivie d'une étiquette.
Maintenant, juste au cas où vous ne savez pas grand chose au sujet de la élément, vous devez connecter l’entrée et l’étiquette pour pouvoir interagir avec l’entrée via l’étiquette. Ceci est fait en utilisant, pour = "" et l'identifiant de l'entrée.
Je vais aussi ajouter un à l'intérieur de l'étiquette, ce qui est plus une préférence personnelle qu'autre chose, mais tout deviendra clair à l'étape 3.
C'est là que commence le plaisir. La première chose à faire, qui constitue la base de tout ce tutoriel, est de masquer la case à cocher..
input [type = "checkbox"] display: none;
Maintenant que cela est fait, nous pouvons nommer l'étiquette, mais plus précisément l'envergure à 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, vous utiliseriez probablement une image d’arrière-plan directement dans l’étiquette et il pourrait être difficile de la positionner..
input [type = "checkbox"] display: none; input [type = "checkbox"] + label span display: inline-block; largeur: 19px; hauteur: 19px; background: url (check_radio_sheet.png) gauche en haut no-repeat;
Bon, laissez-moi vous expliquer ceci rapidement. Tout d'abord, notez l'arrière-plan. J'ai une petite feuille de sprite pour ceux-ci, donc tout ce que j'ai à faire est de définir la position de fond sur cette étendue. L'étendue elle-même correspond à la largeur et à la hauteur exactes de chaque "image-objet" de la feuille, ce qui facilite la définition de chaque état..
Notre feuille de sprite Voici le reste du CSS, spécifique à mon style. Ceci est purement esthétique et spécifique à mon goût ou à ce design.
input [type = "checkbox"] display: none; input [type = "checkbox"] + label span display: inline-block; largeur: 19px; hauteur: 19px; marge: -2px 10px 0 0; alignement vertical: milieu; background: url (check_radio_sheet.png) gauche en haut no-repeat; curseur: pointeur;
Il ne reste plus beaucoup de travail, alors finissons-en. La dernière chose que vous devez faire est de fournir un état pour l'élément lorsque la saisie est vérifiée, et éventuellement pour le survol. C'est assez simple, jetez un coup d'oeil!
input [type = "checkbox"] display: none; input [type = "checkbox"] + label span display: inline-block; largeur: 19px; hauteur: 19px; marge: -2px 10px 0 0; alignement vertical: milieu; background: url (check_radio_sheet.png) gauche en haut no-repeat; curseur: pointeur; input [type = "checkbox"]: vérifié + étiquette span arrière-plan: url (check_radio_sheet.png) -19px haut no-repeat;
Notez que parce que j'ai utilisé une feuille de sprite, tout ce que j'ai à faire est de changer la position de l'arrière-plan. Notez également que tout ce que je devais faire pour définir le style de la vignette lorsque vous «cochiez» une case à cocher / un bouton radio était d'utiliser le CSS3. :vérifié pseudo sélecteur.
Les pseudo-sélecteurs prennent en charge tous les navigateurs, mais les mises en garde habituelles s'appliquent, et la solution de repli est plutôt élégante:
Puis-je utiliser les données pour les pseudo-sélecteurs généraux
Repli: IE9 sur Windows 7 Les premiers navigateurs mobiles sont également un problème - support de :vérifié est pas clair. Mobile Safari pré iOS 6 ne pas soutenez-le, par exemple.
Bon, alors nous avons fini, non? Eh bien, vérifions simplement. D'abord le HTML:
Est-ce que le vôtre est pareil? N'oubliez pas d'ajouter cela ! Lorsque vous expérimentez cela vous-même, je suggère fortement de trouver des façons nouvelles ou différentes de faire cette partie. J'aimerais voir ce que vous proposez pour le rendre plus efficace. Maintenant pour le CSS:
input [type = "checkbox"] display: none; input [type = "checkbox"] + label span display: inline-block; largeur: 19px; hauteur: 19px; marge: -2px 10px 0 0; alignement vertical: milieu; background: url (check_radio_sheet.png) gauche en haut no-repeat; curseur: pointeur; input [type = "checkbox"]: vérifié + étiquette span arrière-plan: url (check_radio_sheet.png) -19px haut no-repeat;
Tout est présent? Parfait. Gardez à l'esprit qu'une grande partie de ce style est spécifique au style que j'ai créé pour les fichiers de démonstration. Je vous encourage à créer le vôtre et à expérimenter le placement et la présentation.
En conclusion, la chose la plus importante que vous puissiez retenir est la toute première ligne de CSS que j'ai écrite tout en haut:
input [type = "checkbox"]: vérifié + libellé
En utilisant cela, vous pouvez créer toute une série de choses différentes. Les possibilités avec :vérifié Allez au-delà des cases à cocher et des radios pour les utiliser dans les formulaires, mais je vous laisserai le faire par vous-même. Quelques choses à expérimenter:
J'espère que vous avez apprécié ce court article et j'espère que vous allez prendre ce que vous voyez ici et l'étendre ou l'améliorer!
Pour finir, nous avons construit un guide complet pour vous aider à apprendre le CSS, que vous commenciez à vous familiariser avec les bases ou que vous souhaitiez explorer un CSS plus avancé..
