Maison > Article > développement back-end > Utilisez CSS3 pour implémenter la commutation des composants du commutateur
Cet article vous présente principalement les informations pertinentes sur la façon d'utiliser CSS3 pour implémenter le composant switch L'éditeur pense que c'est assez bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un œil. J'espère que cela pourra aider tout le monde.
Box à cocher basée sur un formulaire
Rendu
Principe
la case à cocher a deux états, décochée et cochée. Lorsqu'elle est cochée (: cochée), modifiez simplement le style. Tout d'abord, vous devez effacer le style par défaut du navigateur, apparence : aucun. Le code de cet article ne s'exécute que dans Chrome si vous en avez besoin. écrivez le code de compatibilité, ajoutez simplement des préfixes à l'apparence et à la transition
code HTML
<input class='switch-component' type='checkbox'>
code CSS
// switch组件 .switch-component { position: relative; width: 60px; height: 30px; background-color: #dadada; border-radius: 30px; border: none; outline: none; -webkit-appearance: none; transition: all .2s ease; } // 按钮 switch-component::after { content: ''; position: absolute; top: 0; left: 0; width: 50%; height: 100%; background-color: #fff; border-radius: 50%; transition: all .2s ease; } // checked状态时,背景颜色改变 .switch-component:checked { background-color: #86c0fa; } // checked状态时,按钮位置改变 .switch-component:checked::after { left: 50%; }
Recommandations associées :
CSS3 implémente le commutateur de composant switch
Explication détaillée de l'utilisation de switch en PHP
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!