HTML 实现自定义 Input 开关，简单几行代码轻松搞定
2023-10-18 20:47:51
本文将向您介绍如何使用 HTML 和 CSS 轻松实现自定义 Input 开关。本系列旨在通过最直接的事例和最完整的代码，解决一些开发中常遇到的实际问题。
前言
在许多应用程序中，我们经常需要使用 Input 开关来控制某些设置或选项。传统的 Input 开关通常采用方框或圆形样式，但有时候我们可能需要更具设计感或符合特定应用程序风格的开关样式。
使用 HTML 和 CSS，我们可以轻松创建自定义 Input 开关。下面我们将分步介绍如何实现。
步骤 1：创建 HTML 结构
<label class="switch">
<input type="checkbox" hidden>
<span class="slider"></span>
</label>
在这个 HTML 结构中，我们使用了一个 <label> 标签来包裹 <input> 标签和 <span> 标签。<input> 标签是真正的开关元素，但我们将其设置为隐藏，因为我们将使用 CSS 来创建开关的视觉效果。<span> 标签将用作开关的滑块。
步骤 2：添加 CSS 样式
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
margin: 10px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .4s;
}
.switch input:checked + .slider {
background-color: #2196F3;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
transition: .4s;
}
.switch input:checked + .slider:before {
left: calc(100% - 26px);
}
这个 CSS 代码定义了开关的外观和行为。首先，我们设置 <label> 标签为相对定位，以便可以绝对定位其内部元素。然后，我们设置 <input> 标签为隐藏，因为我们将在 CSS 中创建开关的视觉效果。
接下来，我们定义了 <span> 标签的样式。我们将其设置为绝对定位，并设置了其光标为指针，以便用户可以点击或拖动它。我们还设置了它的背景颜色、大小和过渡效果。
然后，我们定义了当 <input> 标签被选中时 <span> 标签的样式。我们将它的背景颜色更改为蓝色，并使用过渡效果来平滑地改变颜色。
最后，我们定义了 <span> 标签内部的伪元素 <span>:before 的样式。我们使用伪元素来创建开关的滑块。我们设置了它的高度、宽度、位置和背景颜色。我们还使用过渡效果来平滑地改变滑块的位置。
当 <input> 标签被选中时，滑块将从左侧移动到右侧。
结语
以上就是使用 HTML 和 CSS 实现自定义 Input 开关的步骤。您可以根据自己的需要调整 CSS 样式，以创建不同样式的开关。希望本文对您有所帮助。
❤️ 如果你喜欢这篇文章，请点赞并关注我的公众号，了解更多精彩内容。我们将在后续的文章中继续探讨如何使用 HTML、CSS 和 JavaScript 来创建更复杂的用户界面元素。
当然，您也可以通过以下方式获取更多帮助：
感谢您的阅读，期待与您下次再见！
