在 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 属性，我们可以创建一个独特、具有视觉吸引力且易于使用的切换开关。
