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

百变鹏仔 4周前 (09-20) #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>

结论

使用 HTML 和 CSS 创建切换开关是一个简单的过程，可以为您的网站或应用程序增加很多价值。通过遵循这些步骤并尝试不同的 CSS 属性，我们可以创建一个独特、具有视觉吸引力且易于使用的切换开关。

文章推荐

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

HTML 代码

CSS 代码

示例 1

示例 2

结论

css如何让导航栏变透明

css 怎么去除a标签的手形

css里怎样设置字体大小和字体颜色

css如何固定导航栏

css边框变圆角边框怎么写