样式复选框没有图像并且仍然有标签？答案

【问题标题】：styling checkbox without images and still having labels?样式复选框没有图像并且仍然有标签？
【发布时间】：2013-03-01 21:00:38
【问题描述】：

我正在尝试设置复选框的样式，而不使用图像。我不喜欢使用 javascript 和事件，但我认为这是最后的手段。是的，我知道很多人在这里询问复选框样式，但我没有找到任何人提出过这个特定问题，或者似乎可以解决问题的答案。

我看过

http://www.inserthtml.com/2012/06/custom-form-radio-checkbox/

这是一个非常好的教程，仅通过 css 完成自定义复选框。然而，在那个例子中，设计师面临着权衡：

要么该解决方案基本上仅适用于 chrome，要么无法添加用作可点击区域扩展的标签。这样做的原因是为了获得跨浏览器的兼容性，每个复选框都被赋予一个空标签，并且所有样式都应用于复选框+标签。结果是，如果我在标签中添加文本，它会在复选框内结束。

有谁知道获得跨浏览器功能和功能标签的方法？我能想出的最佳解决方案是手动将 onclick-event 添加到标签？我真的很喜欢功能性标签，因为我认为它对触摸更友好。

【问题讨论】：

为什么不添加第二个标签？
'因为不知何故我认为它也会最终出现在盒子里:) 但它似乎没有。我可以建议你做一个我可以接受的答案吗？

标签： javascript html css checkbox

【解决方案1】：

您可以简单地将额外的<label> 添加到页面上其他任何位置的 HTML。

例如：

<input type="checkbox" id="checkbox-2-4" class="regular-checkbox big-checkbox">
<label for="checkbox-2-4"></label>
<label for="checkbox-2-4">Your Label Text Here</label>

然后您可以单击其中任何一个，将看到所需的效果。

【讨论】：

但是，我现在面临一个新问题：如何在复选框和实际标签之间获得足够的距离？只需添加 margin-right:5px;对 .regular-checkbox 无效。我意识到在stackoverflow上已经有一个问题了，但我不明白:)
将样式添加到新标签。为它使用一个单独的类名。

【解决方案2】：

使用extra labels！

<label for="checkbox-1-1">Label!</label>
<input type="checkbox" id="checkbox-1-1" class="regular-checkbox" />
<label for="checkbox-1-1"></label>

我的演示将它们放在前面，但您可以将它们放在后面（或其他任何地方）并相应地设置它们的样式。您提到的文章中的 CSS 非常好，因为它非常具体地说明只有标签紧跟复选框要设置样式，所以只要您的“真正”标签不是那个标签，你会没事的。

【讨论】：