Parcours de la tâche / de l'entrée au résultat
Comment concevoir un interrupteur en pur CSS
- 01
Dimensionnez la piste
Réglez la Largeur de piste entre 44 et 128 px et la Hauteur de piste entre 24 et 64 px. La largeur doit dépasser la hauteur d'au moins 8 px pour que le curseur ait de la place pour se déplacer. La valeur par défaut de 64 par 34 px reflète les proportions de la plupart des interrupteurs mobiles. 18 Modèles · Coché · Couleur
- 02
Ajustez le curseur
Choisissez une Taille de curseur de 16 à 56 px. Il doit tenir dans la piste — pas plus grand que la hauteur de piste moins 4 px — sinon l'état bascule sur VÉRIFIER LES VALEURS avec la règle exacte qui a échoué.
- 03
Colorez les deux états
Ces instructions concernent le préréglage de base ; les modèles de la galerie ont leurs propres formes, couleurs, balisage et durées : Choisissez Piste inactive pour la position désactivée et Piste active pour la position activée. Le curseur lui-même reste blanc avec une petite ombre douce, donc les deux couleurs de piste doivent seulement contraster avec le blanc.
- 04
Prévisualisez la transition
Ces instructions concernent le préréglage de base ; les modèles de la galerie ont leurs propres formes, couleurs, balisage et durées : Basculez Afficher l'état actif pour voir le curseur glisser et la piste changer de couleur au timing réel de 180 ms avec easing. La marge autour du curseur est calculée comme la moitié de la hauteur de piste restante, donc l'ajustement reste régulier quelle que soit la taille choisie.
- 05
Copiez ou téléchargez le CSS
Cliquez sur Copier le CSS ou Télécharger le .css pour enregistrer toolars-switch.css. Le curseur blanc parcourt la distance calculée entre les états, et l'export inclut dès le départ la gestion du focus et du mouvement réduit. Le panneau de sortie affiche le nombre d'octets en direct, pour que vous voyiez à quel point le composant reste compact.
- 06
Assemblez le balisage
Placez un input de type checkbox suivi d'un élément .switch-track dans un conteneur .switch, exactement dans cet ordre — le sélecteur de frère adjacent en dépend. L'input rétrécit à une boîte invisible de 1 px mais reste focusable, et le focus dessine un contour de 3 px dans votre couleur de Piste active. Le HTML inclut le CSS actuel et un exemple fonctionnel. Les contrôles natifs acceptent le clavier.