我正在尝试设置复选框的样式，而不使用图像。我不是在使用javascript和事件，但我认为这是最后的手段。是的，我知道有很多人在这里询问复选框样式，但我没有找到任何提出这个特定问题的人，或者似乎解决问题的答案。
我看过
http://www.inserthtml.com/2012/06/custom-form-radio-checkbox/
这是一个非常好的教程，仅通过css完成自定义复选框。 然而，在这个例子中，设计师面临着权衡：
解决方案基本上只适用于chrome，或者无法添加用作可点击区域扩展名的标签。这样做的原因是为了获得跨浏览器兼容性，每个复选框都有一个空标签，所有样式都应用于复选框+标签。结果是，如果我在标签上添加文字，它会在复选框内结束。
有谁知道如何获得跨浏览器功能以及功能标签？我能想出的最佳解决方案是手动将onclick-event添加到标签中？我真的很喜欢功能标签，因为我认为它更适合触摸。
答案 0 :(得分：1)
使用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非常好，因为它非常具体，只有标签在之后立即设置样式，所以只要您的“正版”标签不是那个，你没事。
答案 1 :(得分：1)
您只需在页面上的任何其他位置向HTML添加额外的<label>即可。
例如：
<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>
然后，您可以点击其中之一，然后会看到所需的效果。