css3 implémente le commutateur de composant de commutation

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 pour y jeter 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 :

Introduction détaillée du composant de commutation d'applet WeChat

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!