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

ID:13124 / 打印

如何使用 html 和 css 创建切换开关？

在 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>