将复选框放在label标签内会导致以下问题：before和：after

Question

我正在尝试使用这里显示的翻转开关：

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

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

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

任何帮助都将不胜感激。

Answer 1

轻松修复:-p我设置了demo jsFiddle。

• 将INPUT移至LABEL，确保其显示在<div class="onoffswitch-inner">
之前

• 从最后一个CSS选择器中移除.onoffswitch-label（它位于选择器中间...）

  .onoffswitch-checkbox：选中+ .onoffswitch-label .onoffswitch-inner {     margin-left：0; }