Construire un commutateur de style avec CSS pur en utilisant: vérifié

Il y a quelques années, les développeurs Web n'ont pas pu implémenter et créer autant de choses en utilisant CSS uniquement et sans compter sur JavaScript. Mais aujourd'hui, CSS est suffisamment mature pour qu'il soit capable de faire des choses puissantes sans écrire une seule ligne de JavaScript. Vous avez peut-être également lu quelques articles sur les «approches CSS uniquement» qui démontrent la puissance de CSS.

En ce qui concerne les approches CSS uniquement, nous ne pouvons pas ignorer le sélecteur de pseudo-classe vérifié, que je vais utiliser dans ce post. Bien sûr, je ne suis pas le premier à écrire sur cette technique, et il y a eu d'autres discussions plus approfondies concernant l'utilisation d'éléments de formulaire comme remplacements JavaScript. Par exemple, cet article d'Adobe de Louis Lazaris et ce grand diaporama de Ryan Seddon.

Les plats clés

• Le: le sélecteur de pseudo-classe vérifié dans CSS peut être utilisé pour construire un commutateur de style sans avoir besoin d'écrire une ligne de JavaScript. Il sélectionne tout élément de radio ou de case à cocher qui est coché ou sélectionné.
• Le sélecteur de pseudo-claire: vérifié fonctionne en conjonction avec des éléments d'entrée et d'étiquette. L'attribut «For» dans l'élément d'étiquette, lorsqu'il est cliqué, sélectionne ou vérifie l'élément d'entrée associé, permettant ainsi l'utilisation du sélecteur vérifié.
• La déclaration CSS «Position: fixe», ainsi que les propriétés «supérieure» et «droite», peuvent être utilisées pour positionner des éléments sur la page. La propriété «z-index» garantit que les étiquettes restent au-dessus de tout autre éléments de la page.
• Le sélecteur de pseudo-classe: vérifié peut être utilisé pour modifier l'arrière-plan d'un élément, masquer ou afficher du contenu, ou appliquer d'autres styles, en fonction de l'interaction utilisateur avec l'élément d'étiquette associé.
• Le sélecteur de pseudo-classe: vérifié fonctionne avec le sélecteur de frère adjacent () et le sélecteur de frère général (~), permettant une interaction entre différents éléments sur la page. Cette technique peut être utilisée pour créer une variété de fonctionnalités interactives sur une page Web.

en utilisant: vérifié

En bref, le sélecteur de pseudo-classe: vérifié représente (sélectionne) tout élément de radio ou de case à cocher qui est coché ou sélectionné. L'utilisateur peut modifier l'état de ces éléments en vérifiant une case à cocher ou en sélectionnant une valeur différente dans un ensemble de boutons radio.

Avant de plonger plus profondément, jetez un œil à la démo finale pour avoir une idée de ce que nous allons construire tout au long de ce tutoriel:

Voir le stylo un commutateur de style avec CSS pur en utilisant: vérifié par SitePoint (@SitePoint) sur Codepen.

Maintenant, commençons.

Construire la boîte des paramètres

Dans la démo, vous auriez dû remarquer l'icône du matériel et comment, lorsque vous cliquez sur, une boîte avec certaines options apparaît. Avant de continuer à expliquer le HTML et le CSS qui composent cette boîte, jetez un œil au code suivant:

<span>/* we don't want the input fields to appear, all we need is the labels */
</span><span>input<span><span>[type="checkbox"]</span>, input<span>[type="radio"]</span></span> {
</span>  <span>position: absolute;
</span>  <span>visibility: hidden;
</span><span>}
</span>
<span><span>.settings-box-element</span> {
</span>  <span>z-index: 10;
</span><span>}</span>

Étant donné que nous ne sommes intéressés qu'à afficher les étiquettes, le code ci-dessus est utilisé pour masquer les cases à cocher et les boutons radio. De plus, toutes les étiquettes ont une classe de paramètres-box-element avec une propriété Z-Index juste pour s'assurer que les étiquettes resteront au-dessus de tout autre éléments de la page.

Maintenant, nous pouvons décomposer le code qui constitue la zone de paramètres. Commençons par le bouton Gear. Voici le HTML:

<span><!-- the gear icon that opens the box when you click on it -->
</span><span><span><span><input</span> id<span>="settings-btn"</span> class<span>="settings-btn"</span> type<span>="checkbox"</span>></span>
</span><span><span><span><label</span> for<span>="settings-btn"</span> class<span>="settings-box-element"</span>></span><span><span></label</span>></span></span>

et le CSS:

<span><span>.settings-btn + label</span> {
</span>  <span>position: fixed;
</span>  <span>top: 130px;
</span>  <span>right: 0;
</span>  <span>display: block;
</span>  <span>width: 35px;
</span>  <span>color: #e83737;    
</span>  <span>text-align: center;
</span>  <span>background: #fff;
</span>  <span>cursor: pointer;
</span><span>}</span>

Si vous avez lu un ou deux articles sur l'utilisation d'éléments de formulaire comme remplacements JavaScript, vous devriez déjà savoir que nous devons utiliser des éléments d'entrée et étiqueter ensemble, de sorte que si l'un des deux était supprimé, rien ne fonctionnerait. Nous avons donc une entrée à cocher avec une étiquette avec un attribut pour un attribut qui correspond à la valeur d'ID. J'ai également ajouté une classe de paramètres-btn à utiliser pour notre crochet CSS.

Dans le CSS, l'étiquette reçoit une position: Déclaration fixe avec les propriétés / valeurs de direction appropriées (en haut et à droite).

Ensuite, la boîte blanche qui sera pratiquement contiendra les boutons:

le HTML d'abord:

<span><!-- the white box that contains the buttons -->
</span><span><span><span><div</span> class<span>="buttons-wrapper settings-box-element"</span>></span><span><span></div</span>></span></span>

et le CSS:

<span><span>.buttons-wrapper</span> {
</span>  <span>position: fixed;
</span>  <span>top: 130px;
</span>  <span>right: -200px; /* should match element width */
</span>  <span>width: 200px;
</span>  <span>height: 240px;
</span>  <span>background: #fff;
</span><span>}</span>

La boîte est un seul élément div avec des classes «Buttons-Wrapper» et «Paramètres-box-element». Comme je l'ai dit plus tôt, cette dernière classe est principalement utilisée pour donner aux éléments une valeur d'indice Z. Le «Buttons-Entrer» est utilisé pour styliser l'élément DIV. Et comme vous pouvez le voir, la div a reçu une largeur de 200px et une hauteur de 240px pour accueillir les 5 boutons que vous voyez dans la démo. De plus, le div reçoit une valeur de position des propriétés fixe et droite et supérieure appropriée. La seule chose que vous devez garder à l'esprit ici est que la bonne propriété devrait avoir la même valeur que la largeur mais dans le négatif (afin de le faire disparaître de la fenêtre).

Permet maintenant de jeter un coup d'œil au code pour le balisage restant, c'est-à-dire les 5 boutons. Les commentaires indiquent les styles d'arrière-plan qu'ils contrôlent:

<span><!-- background styles -->
</span><span><!-- light background (#eaeaea) -->
</span><span><span><span><input</span> id<span>="light-layout"</span> class<span>="light-layout"</span> type<span>="radio"</span> name<span>="layout"</span> checked></span>
</span><span><span><span><label</span> for<span>="light-layout"</span> class<span>="layout-buttons settings-box-element"</span>></span>
</span>Light Background<span><span><span></label</span>></span>
</span>
<span><!-- dark background (#494949) -->
</span><span><span><span><input</span> id<span>="dark-layout"</span> class<span>="dark-layout"</span> type<span>="radio"</span> name<span>="layout"</span>></span>
</span><span><span><span><label</span> for<span>="dark-layout"</span> class<span>="layout-buttons settings-box-element"</span>></span>
</span>Dark Background
<span><span><span></label</span>></span>
</span>
<span><!-- image background -->
</span><span><span><span><input</span> id<span>="image-layout"</span> class<span>="image-layout"</span> type<span>="radio"</span> name<span>="layout"</span>></span>
</span><span><span><span><label</span> for<span>="image-layout"</span> class<span>="layout-buttons settings-box-element"</span>></span>
</span>Image Background<span><span><span></label</span>></span>
</span>
<span><!-- pattern background -->    
</span><span><span><span><input</span> id<span>="pattern-layout"</span> class<span>="pattern-layout"</span> type<span>="radio"</span> name<span>="layout"</span>></span>
</span><span><span><span><label</span> for<span>="pattern-layout"</span> class<span>="layout-buttons settings-box-element"</span>></span>
</span>Pattern Background<span><span><span></label</span>></span>
</span>
<span><!-- hide/show content -->
</span><span><span><span><input</span> id<span>="hide-show-content"</span> class<span>="hide-show-content"</span> type<span>="checkbox"</span>></span>
</span><span><span><span><label</span> for<span>="hide-show-content"</span> class<span>="layout-buttons settings-box-element"</span>></span>
</span>Hide/Show content<span><span><span></label</span>></span></span>

Et voici le CSS:

<span><span>.layout-buttons</span> {
</span>  <span>display: block;
</span>  <span>width: 150px;
</span>  <span>padding: 10px 0;
</span>  <span>text-align: center;
</span>  <span>border: 2px solid black;
</span>  <span>box-sizing: border-box;
</span>  <span>font-size: 0.875em;
</span>  <span>cursor: pointer;
</span><span>}
</span>
<span><span>.light-layout + label</span> {
</span>  <span>position: fixed;
</span>  <span>top: 140px;
</span>  <span>right: -150px;
</span><span>}
</span>
<span><span>.dark-layout + label</span> {
</span>  <span>position: fixed;
</span>  <span>top: 185px;
</span>  <span>right: -150px;
</span><span>}
</span>
<span><span>.image-layout + label</span> {
</span>  <span>position: fixed;
</span>  <span>top: 230px;
</span>  <span>right: -150px;
</span><span>}
</span>
<span><span>.pattern-layout + label</span> {
</span>  <span>position: fixed;
</span>  <span>top: 275px;
</span>  <span>right: -150px;
</span><span>}
</span>
<span><span>.hide-show-content + label</span> {
</span>  <span>position: fixed;
</span>  <span>top: 320px;
</span>  <span>right: -150px;
</span><span>}</span>

Notez que la première case à cocher a reçu l'attribut «coché». C'est parce que nous voulons que ce soit celui mis en évidence par défaut.

Chaque champ de saisie a un ID et chaque étiquette a un attribut pour l'attribut qui correspond à l'ID pour l'un des champs d'entrée. Et comme vous pouvez le savoir ou non, le secret derrière une telle technique est l'attribut pour, car lorsqu'une étiquette avec un attribut pour un attribut est cliquée, l'élément associé à cette étiquette particulière sera sélectionné / vérifié et cela nous permet donc Pour utiliser le: sélecteur vérifié.

Toutes les étiquettes ci-dessus ont une classe de «Buttons de mise en page». Cette classe est utilisée pour donner aux boutons la valeur par défaut et les styles communs tels que la largeur, le rembourrage, les bordures, etc. Les autres classes sont utilisées pour ajouter les styles uniques à chacun. Et comme vous l'avez vu pour l'icône de vitesse et la boîte blanche, la propriété de position est utilisée avec la valeur fixe et les propriétés supérieures et droites appropriées. Notez que la valeur supérieure pour chaque étiquette est de 45px supérieure à celle avant elle; Il s'agit de faire en sorte que les boutons s'empilent bien au-dessus les uns des autres et sans chevauche. Notez également que la bonne valeur de propriété est la même que la largeur des boutons mais en négatif.

Jetez maintenant un œil à la dernière partie de notre code CSS:

<span>/* we don't want the input fields to appear, all we need is the labels */
</span><span>input<span><span>[type="checkbox"]</span>, input<span>[type="radio"]</span></span> {
</span>  <span>position: absolute;
</span>  <span>visibility: hidden;
</span><span>}
</span>
<span><span>.settings-box-element</span> {
</span>  <span>z-index: 10;
</span><span>}</span>

Le CSS ci-dessus est utilisé pour modifier les styles par défaut de l'étiquette associés au bouton radio sélectionné (nous avons 4 boutons radio). J'ai utilisé le sélecteur de frère adjacent pour cibler chaque étiquette précédée d'un champ de saisie de type «radio». Ainsi, comme vous pouvez le voir, les propriétés d'arrière-plan et de bordure ont reçu la valeur # E83737 (une couleur rougeâtre) et la propriété de couleur la valeur #fff. Rien de vraiment sophistiqué ou complexe.

Les éléments restants du HTML seront enveloppés à l'intérieur d'une div:

<span><!-- the gear icon that opens the box when you click on it -->
</span><span><span><span><input</span> id<span>="settings-btn"</span> class<span>="settings-btn"</span> type<span>="checkbox"</span>></span>
</span><span><span><span><label</span> for<span>="settings-btn"</span> class<span>="settings-box-element"</span>></span><span><span></label</span>></span></span>

Remarquez dans le code ci-dessus que j'ai positionné chaque élément de la zone de paramètres indépendamment où je pouvais simplement les envelopper tous dans un élément div ou section et positionner cet seul élément, ce qui rend les choses plus simples. Cela se fait simplement parce que vous ne pouvez pas sélectionner un élément parent, seulement un frère.

Donc, dans ce cas, tout le contenu principal est enveloppé à l'intérieur d'un div. Et comme vous le verrez plus loin, pour pouvoir changer les styles de cette div, nous devrons sélectionner cette div en écrivant quelque chose de similaire à ceci:

<span><span>.settings-btn + label</span> {
</span>  <span>position: fixed;
</span>  <span>top: 130px;
</span>  <span>right: 0;
</span>  <span>display: block;
</span>  <span>width: 35px;
</span>  <span>color: #e83737;    
</span>  <span>text-align: center;
</span>  <span>background: #fff;
</span>  <span>cursor: pointer;
</span><span>}</span>

Ici, j'utilise le sélecteur de frère général pour sélectionner la div principale, qui est la seule façon de le faire.

Cliquez sur l'icône de l'équipement

Cliquez sur l'icône de l'équipement devrait faire apparaître la zone de paramètres. Voici le code pour y arriver:

<span><!-- the white box that contains the buttons -->
</span><span><span><span><div</span> class<span>="buttons-wrapper settings-box-element"</span>></span><span><span></div</span>></span></span>

Lorsque l'utilisateur clique sur l'icône du matériel, la case à cocher avec sera sélectionnée, et voici la magie. Une fois l'icône de vitesse cliquée, ce qui suit se produira:

1. En utilisant le sélecteur de frères et sœurs adjacent (), l'étiquette qui vient immédiatement après cette case à cocher sera sélectionnée puis déplacée à 200 pixels de la droite de la fenêtre.

2. En utilisant le sélecteur de frère général ~, les éléments avec des classes "Buttons-Wrapper" et "Layout-Buttons" seront sélectionnés puis déplacés de manière à ce qu'ils soient 0 pixels et 30 pixels, respectivement, à droite de la droite de la droite de la droite de la droite de la droite de la droite de la fenêtre.

Le sélecteur de frères et sœurs adjacent et le sélecteur de frère général sont indispensables ici car cette technique ne fonctionnera pas sans elles.

Modification de l'arrière-plan

Permettez-moi de vous rappeler le code HTML pour les boutons radio:

<span>/* we don't want the input fields to appear, all we need is the labels */
</span><span>input<span><span>[type="checkbox"]</span>, input<span>[type="radio"]</span></span> {
</span>  <span>position: absolute;
</span>  <span>visibility: hidden;
</span><span>}
</span>
<span><span>.settings-box-element</span> {
</span>  <span>z-index: 10;
</span><span>}</span>

L'arrière-plan que nous modifierons est l'arrière-plan de l'élément .main-wrapper. Voici le CSS:

<span><!-- the gear icon that opens the box when you click on it -->
</span><span><span><span><input</span> id<span>="settings-btn"</span> class<span>="settings-btn"</span> type<span>="checkbox"</span>></span>
</span><span><span><span><label</span> for<span>="settings-btn"</span> class<span>="settings-box-element"</span>></span><span><span></label</span>></span></span>

Vous pouvez voir que dans le HTML, nous avons 4 éléments d'entrée de type = "radio" et 4 étiquettes. Lorsque l'une des étiquettes est cliquée, l'entrée qui est associée à cette étiquette particulière sera sélectionnée et donc appariée par la pseudo-classe vérifiée. Ensuite, selon l'étiquette cliquée, l'un des quatre styles ci-dessus sera appliqué à l'emballage principal.

cacher / afficher le contenu

Pour l'élément Show / Hide, j'utilise une case à cocher:

<span><span>.settings-btn + label</span> {
</span>  <span>position: fixed;
</span>  <span>top: 130px;
</span>  <span>right: 0;
</span>  <span>display: block;
</span>  <span>width: 35px;
</span>  <span>color: #e83737;    
</span>  <span>text-align: center;
</span>  <span>background: #fff;
</span>  <span>cursor: pointer;
</span><span>}</span>

Et voici le CSS:

<span><!-- the white box that contains the buttons -->
</span><span><span><span><div</span> class<span>="buttons-wrapper settings-box-element"</span>></span><span><span></div</span>></span></span>

Dans ce cas, nous disons au navigateur de sélectionner l'élément avec et de le définir pour afficher: Aucun "lorsque l'utilisateur clique sur l'étiquette associée, sélectionnant ainsi la case.

Conclusion

Il y a beaucoup d'autres choses que vous pouvez faire en utilisant cette technique de sélecteur et la limite est votre propre créativité. Si cette technique est nouvelle pour vous, j'espère que cet article pourra vous servir de point de départ pour expérimenter d'autres possibilités.

ci-dessous, vous trouverez la démo terminée:

Voir le stylo un commutateur de style avec CSS pur en utilisant: vérifié par SitePoint (@SitePoint) sur Codepen.

Questions fréquemment posées (FAQ) sur la construction d'un commutateur de style avec des CSS purs en utilisant vérifié

Quel est le but de la pseudo-classe vérifiée dans CSS?

La pseudo-classe vérifiée dans CSS est une pseudo-classe d'interface utilisateur, qui est utilisée pour sélectionner et styliser des cases à cocher, des boutons radio ou des éléments d'option sélectionnés par l'utilisateur. Il s'agit d'un outil puissant qui permet aux développeurs de créer des pages Web interactives et dynamiques sans avoir besoin de JavaScript. Par exemple, il peut être utilisé pour créer un commutateur de style, où les utilisateurs peuvent modifier l'apparence d'une page Web en sélectionnant différentes options.

Comment fonctionne le: Classe pseudo-vérifiée?

La : Les travaux de pseudo-classe vérifiés fonctionnent en sélectionnant les éléments HTML qui sont actuellement sélectionnés ou vérifiés. Il est généralement utilisé avec des éléments de formulaire comme les cases à cocher ou les boutons radio. Lorsqu'un utilisateur sélectionne ou vérifie l'un de ces éléments, la pseudo-classe vérifiée devient active et applique les styles CSS spécifiés à cet élément. Cela peut être utilisé pour mettre en surbrillance l'option sélectionnée, afficher ou masquer le contenu, ou même modifier la disposition entière d'une page Web.

Puis-je utiliser la pseudo-classe vérifiée avec d'autres éléments HTML?

La pseudo-classe vérifiée est principalement utilisée avec des éléments de formulaire comme les cases à cocher, les boutons radio et les éléments d'option. Cependant, il peut également être utilisé avec d'autres éléments en combinaison avec l’attribut HTML5 «satisfait». Cela vous permet de créer un contenu interactif qui peut être modifié par l'utilisateur et le style différemment lorsqu'il est dans l'état «vérifié» ou «sélectionné».

Comment puis-je utiliser la pseudo-classe vérifiée pour créer un commutateur de style?

Pour créer un commutateur de style à l'aide de la pseudo-classe vérifiée, vous auriez d'abord besoin de créer un formulaire avec des boutons radio ou cocher les cases pour chaque option de style. Ensuite, dans votre CSS, vous utiliseriez la pseudo-classe vérifiée pour appliquer différents styles en fonction de l'option sélectionnée. Cela pourrait impliquer la modification du schéma de couleurs, de la police, de la mise en page ou de tout autre aspect de l'apparence de la page Web.

Puis-je utiliser la pseudo-classe vérifiée pour créer un contenu dynamique?

Oui, le, le, le, le, le, le oui, le oui, le oui, le oui, le oui, le oui, le oui, le oui, le oui, le oui, le oui, le oui, le Yes : La pseudo-classe vérifiée peut être utilisée pour créer du contenu dynamique. En le combinant avec d'autres sélecteurs et propriétés CSS, vous pouvez afficher ou masquer du contenu, modifier la mise en page ou créer des fonctionnalités interactives en fonction des sélections de l'utilisateur. Cela peut améliorer considérablement l'expérience utilisateur et rendre vos pages Web plus attrayantes et interactives.

Est-il possible d'utiliser la pseudo-classe vérifiée sans JavaScript?

Oui, l'un des principaux avantages de la pseudo-classe vérifiée est qu'il vous permet de créer des fonctionnalités interactives sans avoir besoin de JavaScript. Bien que JavaScript soit un outil puissant pour le développement Web, il peut également être complexe et difficile à utiliser. La pseudo-classe vérifiée fournit une alternative plus simple pour la création de contenu interactif.

Comment: la pseudo-classe vérifiée est-elle prise en charge dans différents navigateurs?

La pseudo-classe vérifiée est largement prise en charge dans Tous les navigateurs modernes, y compris Chrome, Firefox, Safari et Edge. Cependant, il n'est pas pris en charge dans Internet Explorer 8 ou antérieurs. Par conséquent, si vous devez prendre en charge ces anciens navigateurs, vous devrez peut-être utiliser une solution basée sur JavaScript à la place.

Puis-je utiliser: les cases à cocher et les boutons radio de la pseudo-classe > Oui, la pseudo-classe vérifiée peut être utilisée pour styliser les cases à cocher et les boutons radio. Par défaut, ces éléments de formulaire ont une apparence très basique, mais avec la pseudo-classe vérifiée, vous pouvez personnaliser leur apparence pour correspondre au reste de votre site Web. Vous pouvez modifier la couleur, la taille, la forme et même l'animation de ces éléments lorsqu'elles sont sélectionnées.

Quels sont les cas d'utilisation courants pour la pseudo-classe vérifiée?

Le:: La pseudo-classe vérifiée est couramment utilisée pour créer des fonctionnalités interactives telles que les commutateurs de style, les accordéons, les onglets et les modaux. Il peut également être utilisé pour styliser des éléments de formulaire tels que les cases à cocher et les boutons radio, ou pour créer du contenu modifiable avec l’attribut «satisfait». Sa capacité à réagir à la saisie des utilisateurs en fait un outil puissant pour améliorer l'expérience utilisateur.

y a-t-il des limitations ou des inconvénients à l'utilisation de la pseudo-classe vérifiée?

Bien que la pseudo-classe est un outil puissant, il a certaines limites. Il ne peut sélectionner que des éléments qui sont actuellement sélectionnés ou vérifiés, il ne peut donc pas être utilisé pour styliser des éléments en fonction d'autres états ou conditions. De plus, il n'est pas pris en charge dans Internet Explorer 8 ou antérieurs. Malgré ces limites, c'est toujours un outil précieux pour créer du contenu Web interactif et dynamique.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!