javascript - 将复选框放在标签标签内会导致 :before 和 :after 出现问题

Question

我正在尝试使用如下所示的翻转开关：

http://proto.io/freebies/onoff/

我遇到的问题是我需要动态地进行这些开关，所以我不能在每个开关上设置一个 id（我也想避免通过 javascript 这样做）。

我尝试将复选框放在标签内，但是这似乎导致示例中的“onoffswitch-inner”上的 :before 和 :after 无法正常工作。我对 CSS 和 HTML 非常缺乏经验，所以我有点卡住了。

任何帮助，将不胜感激。

Answer 1

轻松修复：-p 我设置了一个演示 jsFiddle。

• 将INPUT移入LABEL，确保它出现在之前<div class="onoffswitch-inner">

• 从最后一个 CSS 选择器中删除.onoffswitch-label（它在选择器的中间……）

  .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner { margin-left: 0; }