javascript - 没有图像但仍有标签的样式复选框？

Question

我试图在不使用图像的情况下设置我的复选框的样式。我不是在使用 javascript 和事件之上，但我认为这是最后的手段。是的，我知道很多人在这里询问复选框样式，但我没有找到任何人问过这个特定问题，也没有找到似乎可以解决问题的答案。

我看过

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

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

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

有谁知道同时获得跨浏览器功能和功能标签的方法吗？我能想到的最佳解决方案是手动将 onclick 事件添加到标签中？我真的很喜欢功能性标签，因为我认为它更便于触摸。

Answer 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>

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