如何点击输入复选框的背景？

Question

我正在研究开关复选框输入，目前仅当我单击开关旋钮时样式才会发生变化。但是，当检查开关输入并单击滑块而不是旋钮本身时，我无法弄清楚如何更改开关样式。

<input type="checkbox" id="toggle"/>
<div>
  <label for="toggle"></label>
</div>

input[type="checkbox"] {
  display: none;
}
/* style switch when 'unchecked' */
div {
  position: relative;
  width: 42px;
  height: 26px;
  background: #cccccc;
  border-radius: 20px;
}
/* style switch knob */
label {
  position: absolute;
  width: 22px;
  height: 22px;
  background: #ffffff;
  top: 2px;
  left: 2px;  
  border-radius: 50%;
  cursor: pointer;
}

/* style slider and knob when switch is 'checked' */
input[type="checkbox"]:checked ~ div label {
  -webkit-transform: translateX(16px);
  -ms-transform: translateX(16px);
  transform: translateX(16px);
}
input[type="checkbox"]:checked ~ div {
  background: #0071d0;
}

/* style knob when switch is unchecked. */
label::before {
  position: absolute;
  content: '\1F5D9';
  width: 10px;
  height: 10px;
  left: 3px;
  top: -1px;
}

/* style knob when switch is checked. */
input[type="checkbox"]:checked ~ div label::before {
  position: absolute;
  content: '\2713';
  width: 10px;
  height: 10px;
  left: 5px;
}

有人可以看一下并帮助我吗？谢谢！

链接：https://codepen.io/Zack-Oliver/pen/poqGeYO

Answer 1

标签内不需要有标签，而需要在标签内有一个跨度。

input[type="checkbox"] {
  display: none;
}
/* style switch when 'unchecked' */
label {
  display: inline-block;
  position: relative;
  width: 42px;
  height: 26px;
  background: #cccccc;
  border-radius: 20px;
}
/* style switch knob */
label>span {
  position: absolute;
  width: 22px;
  height: 22px;
  background: #ffffff;
  top: 2px;
  left: 2px;  
  border-radius: 50%;
  cursor: pointer;
}

/* style slider and knob when switch is 'checked' */
input[type="checkbox"]:checked ~ label>span {
  transform: translateX(16px);
}
input[type="checkbox"]:checked ~ label {
  background: #0071d0;
}

/* style knob when switch is unchecked. */
label>span::before {
  position: absolute;
  content: 'n';
  width: 100%;
  height: 100%;
  top: -2px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* style knob when switch is checked. */
input[type="checkbox"]:checked ~ label>span::before {
  content: 'y';
}

<input type="checkbox" id="toggle"/>
<label for="toggle"><span></span></label>