CSS：切换开关的问题。如何呈现整个切换的输入复选框的行为？

Question

我正在开发一个 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隐形，但仍然将其行为扩展到整个切换开关！我哪里错了？

Answer 1

你需要<label>改用