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