Comment implémenter un composant de commutation simple en CSS

En tant qu'ingénieurs de développement front-end, nous devons souvent ajouter divers commutateurs à la page. Aujourd'hui, nous utiliserons CSS pour implémenter un composant de commutation simple pour une utilisation future dans nos projets.

Nous pouvons mettre en œuvre le changement de deux manières. La première consiste à utiliser des composants prêts à l’emploi provenant de bibliothèques de framework front-end. L'autre consiste à écrire le commutateur vous-même en utilisant HTML et CSS. Nous choisissons cette dernière afin de mieux comprendre le principe de mise en œuvre du switch.

Tout d'abord, sur la page HTML, nous devons créer un conteneur contenant le commutateur. Ce conteneur peut être un élément div ou un élément fieldset. Dans ce conteneur, nous pouvons créer deux étiquettes, une pour afficher l'état du commutateur et une autre pour l'opération marche/arrêt réelle.

Il est très simple d'implémenter le commutateur en utilisant CSS et HTML. Il suffit d'utiliser le sélecteur input[type="checkbox"] pour cocher la case. Ensuite, nous pouvons définir le style du switch via les styles CSS. Voici un simple extrait de code HTML :

<div>
  <label></label>
  <input>
</div>

Ensuite, nous pouvons utiliser des styles CSS pour définir le style du commutateur, y compris l'état du commutateur.

.switch-container {
  position: relative;
  display: inline-block;
  width: 32px;
  height: 16px;
}

/* 设置 label 元素样式 */
.switch-container label {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.25);
  transition: all 0.2s ease-in-out;
}

/* 设置 switch 元素样式 */
.switch-container input[type="checkbox"] {
  display: none;
}

/* 设置 label 元素 `::before` 伪元素的样式 */
.switch-container label::before {
  content: "";
  display: block;
  position: absolute;
  width: 10px;
  height: 10px;
  top: 3px;
  left: 3px;
  border-radius: 50%;
  background-color: #888;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.25);
  transition: all 0.2s ease-in-out;
}

/* 设置 switch 上下面板的样式 */
.switch-container input[type="checkbox"]:checked + label {
  border-color: #2ecc71;
  background-color: #2ecc71;
}

.switch-container input[type="checkbox"]:checked + label::before {
  transform: translateX(16px);
  background-color: #fff;
}

À quoi sert l'extrait de code ci-dessus ? Il définit un conteneur qui contient une balise label et un élément input[type="checkbox"]. Nous utilisons ensuite des styles CSS pour définir l'état et le style du commutateur. Nous utilisons des pseudo-éléments pour représenter les états marche et arrêt de l'interrupteur et une animation pour simuler leur mouvement.

Ici, nous définissons les couleurs pour les états activé et désactivé, mais vous pouvez les personnaliser en modifiant les styles CSS. Nous pouvons également ajouter une ombre au conteneur, utiliser un curseur au lieu d'un cercle, et bien plus encore.

Enfin, il vous suffit d'ajouter ce code à votre site Web pour utiliser le magnifique contrôle de commutation CSS.

En bref, il est facile de contrôler l'état du commutateur à l'aide des styles CSS. Il s'agit d'une solution très simple et légère pour personnaliser complètement le style de votre commutateur. Si vous devez ajouter des commandes à bascule à votre site Web, essayez cette astuce simple mais puissante pour mieux contrôler la bascule et la personnaliser afin d'améliorer l'expérience utilisateur.

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!