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>改用