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=&#39;switch-component&#39; type=&#39;checkbox&#39;>

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

JS utilise switch pour déterminer le partage de code de l'opération ternaire pendant et l'opération d'attribut

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!