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

WBOY 转载: 2023-08-25 18:02:09 754浏览

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

如果我们希望向网站添加很酷的交互式功能，切换开关是一个不错的选择。在这里，我们将探讨如何使用 HTML 和 CSS 创建切换开关。

创建切换开关的第一步是使用 HTML 创建开关的基本结构。我们可以通过使用 div 元素作为容器，并添加两个 input 元素来表示开关的开/关状态来实现这一点。

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 的显示属性设置为“inline-block”，并将开关的宽度和高度设置为适合您的网站或应用程序的大小。我们还使用 border-radius 属性为开关创建圆形。

我们将向标签元素添加一个伪元素并将其内容设置为空字符串。我们还将给它一个背景颜色并将其绝对定位在容器内。选中该复选框后，我们将伪元素移动到右侧以显示切换开关的打开状态。

通过在 CSS 中使用 :checked 选择器，我们可以在打开开关时更改白色背景颜色的位置，从而创建平滑且具有视觉吸引力的过渡。我们还可以使用其他 CSS 属性（例如背景颜色、字体大小和文本对齐）来自定义开关的外观。

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>