他们的内置拨动开关是否在 HTML5 中？

Question

我一直在寻找一种将拨动开关放入设计的好方法。 但是，在寻找执行此操作的标准方法时，我遇到的只是通过 HTML 和 CSS 组合创建的拨动开关。 请参阅下面w3中的示例：

 /* The switch - the box around the slider */.switch { position: relative; display: inline-block; width: 60px; height: 34px; } /* Hide default HTML checkbox */.switch input { opacity: 0; width: 0; height: 0; } /* The slider */.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; }.slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; } input:checked +.slider { background-color: #2196F3; } input:focus +.slider { box-shadow: 0 0 1px #2196F3; } input:checked +.slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); } /* Rounded sliders */.slider.round { border-radius: 34px; }.slider.round:before { border-radius: 50%; }

 <!-- Rounded switch --> <label class="switch"> <input type="checkbox"> <span class="slider round"></span> </label>

这是在 HTML5 中创建拨动开关的唯一方法吗？

Answer 1

拨动开关本质上是一个复选框，具有某种类型的样式。

两者都是二进制输入，因此将两者都作为不同的 HTML 元素会有点多余。 复选框早在开关出现之前就已成为标准，并且为 HTML 添加一个全新的元素以实现小的 UI 差异并没有多大意义。

希望有帮助！