Maison > Article > interface Web > Comment créer une bascule en utilisant HTML et CSS ?

Comment créer une bascule en utilisant HTML et CSS ?

WBOYavant: 2023-08-25 18:02:091566parcourir

如何使用 HTML 和 CSS 创建切换开关？

En HTML et CSS, un interrupteur à bascule est un élément d'interface utilisateur graphique qui permet à l'utilisateur de basculer entre deux états (généralement "on" et "off"). Les commutateurs à bascule sont créés à l'aide d'un élément d'entrée HTML de type « checkbox » et d'un élément d'étiquette correspondant avec un style CSS. L'élément label est stylé pour afficher l'état "on" lorsque l'entrée est sélectionnée, et l'élément label est stylé pour afficher l'état "off" lorsque l'entrée n'est pas sélectionnée.

Si nous souhaitons ajouter des fonctionnalités interactives intéressantes à notre site Web, les bascules sont un excellent choix. Ici, nous allons explorer comment créer une bascule en utilisant HTML et CSS.

La première étape de la création d'un interrupteur à bascule consiste à créer la structure de base du commutateur en utilisant HTML. Nous pouvons y parvenir en utilisant un élément div comme conteneur et en ajoutant deux éléments d'entrée pour représenter l'état marche/arrêt du commutateur.

Code HTML

Ceci est un morceau de code HTML.

<html>
   <body>
      <h3>Toggle Switch Example</h3>
      <div class="toggle">
         <input type="checkbox" id="toggle-checkbox" class="togglecheckbox">
         <label for="toggle-checkbox" class="toggle-label"></label>
      </div>
   </body>
</html>

Maintenant, nous devons styliser l'interrupteur à bascule en utilisant CSS. Commencez par définir la propriété d'affichage du div du conteneur sur "inline-block" et définissez la largeur et la hauteur du commutateur sur une taille appropriée pour votre site Web ou votre application. Nous utilisons également la propriété border-radius pour créer une forme circulaire pour le commutateur.

Nous ajouterons un pseudo-élément à l'élément label et définirons son contenu sur une chaîne vide. Nous allons également lui donner une couleur de fond et le positionner absolument à l'intérieur du conteneur. Avec la case cochée, nous déplaçons le pseudo-élément vers la droite pour afficher l'état activé de l'interrupteur à bascule.

En utilisant le sélecteur :checked en CSS, nous pouvons changer la position de la couleur de fond blanc lorsque l'interrupteur est activé, créant ainsi une transition fluide et visuellement attrayante. Nous pouvons également personnaliser l'apparence du commutateur à l'aide d'autres propriétés CSS telles que la couleur d'arrière-plan, la taille de la police et l'alignement du texte.

Code CSS

Voici le code CSS.

<style>
   body{
      text-align:center;
   }
   .toggle {
      display: inline-block;
      width: 80px;
      height: 38px;
      background-color: #8eeb60;
      border-radius: 40px;
      position: relative;
      overflow: hidden;
   }
   .toggle input[type="checkbox"] {
      display: none;
   }
   .toggle-label {
      display: block;
      overflow: hidden;
      cursor: pointer;
      border-radius: 34px;
   }
   .toggle-label:before {
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      background-color: red;
      border-radius: 34px;
      position: absolute;
      top: 0;
      left: 0;
      transition: all 0.25s ease-in-out;
   }
   .toggle-checkbox:checked+.toggle-label:before {
      transform: translateX(35px);
   }
</style>

Exemple 1

Voici un exemple de création d'un interrupteur à bascule en utilisant HTML et CSS.

<html>
<head>
    <style>
    body{
        text-align:center;
    }
    .toggle {
        display: inline-block;
        width: 80px;
        height: 38px;
        background-color: #8eeb60;
        border-radius: 40px;
        position: relative;
        overflow: hidden;
    }
    .toggle input[type="checkbox"] {
        display: none;
    }
    .toggle-label {
        display: block;
        overflow: hidden;
        cursor: pointer;
        border-radius: 34px;
    }
    .toggle-label:before {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        background-color: red;
        border-radius: 34px;
        position: absolute;
        top: 0;
        left: 0;
        transition: all 0.25s ease-in-out;
    }
    .toggle-checkbox:checked+.toggle-label:before {
        transform: translateX(35px);
    }
    </style>
</head>
<body>
    <h3>Toggle Switch Example</h3>
    <div class="toggle">
        <input type="checkbox" id="toggle-checkbox" class="toggle-checkbox">
        <label for="toggle-checkbox" class="toggle-label"></label>
    </div>
</body>
</html>

Exemple 2

Voici un autre exemple de création d'un interrupteur à bascule à l'aide de HTML et CSS.

<html>
<head>
   <style>
      body{
         text-align:center;
      }
      .toggle {
         position: relative;
         display: block;
         width: 100px;
         height: 40px;
         padding: 3px;
         margin: auto;
         border-radius: 50px;
         cursor: pointer;
      }
      .toggle-input {
         position: absolute;
         top: 0;
         left: 0;
         opacity: 0;
      }
      .toggle-label {
         position: relative;
         display: block;
         height: inherit;
         font-size: 12px;
         background: red;
         border-radius: inherit;
         box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 3px
         rgba(0, 0, 0, 0.15);
      }
      .toggle-label:before,
      .toggle-label:after {
         position: absolute;
         top: 50%;
         color: black;
         margin-top: -.5em;
         line-height: 1;
      }
      .toggle-label:before {
         content: attr(data-off);
         right: 11px;
         color: #fff;
         text-shadow: 0 1px rgba(255, 255, 255, 0.5);
      }
      .toggle-label:after {
         content: attr(data-on);
         left: 11px;
         color: #fff;
         text-shadow: 0 1px rgba(0, 0, 0, 0.2);
         opacity: 0;
      }
      .toggle-input:checked~.toggle-label {
         background: green;
      }
      .toggle-input:checked~.toggle-label:before {
         opacity: 0;
      }
      .toggle-input:checked~.toggle-label:after {
         opacity: 1;
      }
      .toggle-handle {
         position: absolute;
         top: 4px;
         left: 4px;
         width: 38px;
         height: 38px;
         background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
         border-radius: 50%;
      }
      .toggle-handle:before {
         position: absolute;
         top: 50%;
         left: 50%;
         margin: -6px 0 0 -6px;
         width: 16px;
         height: 16px;
      }
      .toggle-input:checked~.toggle-handle {
         left: 64px;
         box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
      }

      /* Transition*/
      .toggle-label,
      .toggle-handle {
         transition: All 0.3s ease;
         -webkit-transition: All 0.3s ease;
         -moz-transition: All 0.3s ease;
         -o-transition: All 0.3s ease;
      }
   </style>
</head>
   <body>
      <h3>Toggle Switch by using HTML and CSS</h3>
      <label class="toggle">
         <input class="toggle-input" type="checkbox" />
         <span class="toggle-label" data-off="OFF" data-on="ON"></span>
         <span class="toggle-handle"></span>
      </label>
   </body>
</html>

Conclusion

Créer une bascule à l'aide de HTML et CSS est un processus simple qui peut ajouter beaucoup de valeur à votre site Web ou à votre application. En suivant ces étapes et en expérimentant différentes propriétés CSS, nous pouvons créer une bascule unique, visuellement attrayante et facile à utiliser.

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!

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Effet d'animation de rebond à gauche en utilisant CSSArticle suivant：Effet d'animation de rebond à gauche en utilisant CSS

Articles Liés

Voir plus