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

在HTML和CSS中， 切换开关 是一种图形用户界面元素，允许用户在两个状态之间切换，通常是“开”和“关”。通过使用带有”type=checkbox”的HTML输入元素和带有CSS样式的相应标签元素来创建切换开关。当输入被选中时，标签元素的样式被设置为显示“开”状态，当它未被选中时，标签元素的样式被设置为显示“关”状态。

如果我们想要为网站增加一个酷炫而交互性的特性，切换开关是一个很好的选择。在这里，我们将探讨如何使用HTML和CSS创建切换开关。

创建切换开关的第一步是使用HTML创建开关的基本结构。我们可以使用一个div元素作为容器，并添加两个输入元素来表示开关的打开和关闭状态。

HTML代码

下面是一个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>

现在，我们将需要使用CSS来样式化切换按钮。首先，将容器div的display属性设置为”inline-block”，并将切换按钮的宽度和高度设置为适合您的网站或应用程序的尺寸。我们还使用border-radius属性为切换按钮创建一个圆角形状。

我们将向label元素添加一个伪元素，并将其内容设置为一个空字符串。我们还将为其设置一个背景颜色，并绝对定位在容器内部。当复选框被选中时，我们将伪元素向右移动，以显示切换按钮的打开状态。

通过在CSS中使用:checked选择器，当切换按钮打开时，我们改变白色背景颜色的位置，从而创建出平滑且视觉上吸引人的过渡效果。我们还可以使用其他的CSS属性，如background-color、font-size和text-align来自定义切换按钮的外观。

CSS代码

以下是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>

示例1

以下是使用HTML和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>

示例2

在这里是另一个示例，通过HTML和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>