我正在开发一个 Web 应用程序（使用 AngularJS），我需要创建一个切换开关。网上的指南看起来并不难，我遵循的是 W3C 的指南：https://www.w3schools.com/howto/howto_css_switch.asp
在本指南中，一切正常：我可以在切换开关区域内单击任何我想要的位置，并且它的行为符合预期。显然，其背后必须有一个checkbox类型输入。
不幸的是，这在我的应用程序中没有发生。这是我的代码（我使用它是因为标签已经有了正确的<div>样式）：<label>
<style>
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.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);
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
</style>
<div class="switch">
<input type="checkbox">
<span class="slider round"></span>
</div>
正如您所看到的，这是完全相同的 W3C 代码（除了我没有隐藏输入，否则在我的情况下什么都不会发生！）。不幸的是发生了以下事情：
input checkbox风格是完美的，但只有通过单击左小角（这将是故意不被遮挡的！），行为才是正确的。如果我按照 W3C 的建议使复选框输入不可见，我将无法再单击该角落，并且什么也不会发生！
我不明白如何使input checkbox隐形，但仍然将其行为扩展到整个切换开关！我哪里错了？
RISEBY
相关分类