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

<分区>

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

我遇到的问题是我需要动态地进行这些切换，所以我不能为每个设置一个 id(我也想避免通过 javascript 这样做)。

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

如有任何帮助，我们将不胜感激。

最佳答案

很容易修复 :-p 我已经设置了一个 demo jsFiddle .

移动INPUT进入LABEL , 确保它出现在 <div class="onoffswitch-inner"> 之前
删除 .onoffswitch-label来自最后一个 CSS 选择器(它在选择器的中间……)

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner { 左边距:0；

关于javascript - 将复选框放在标签标签内会导致 :before and :after 出现问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14130177/

相关文章：

javascript - 如果 'this' 类为 true，则禁用按钮