样式复选框没有图像，仍然有标签

styling checkbox without images and still having labels?

本文关键字：标签 图像 复选框 样式      更新时间：2023-09-26

我试图样式我的复选框，不使用图像。我不高于使用javascript和事件，但我认为这是最后的手段。是的，我知道很多人在这里问关于复选框样式的问题，但是我没有发现有人问过这个问题，或者似乎解决了这个问题的答案。

我已经看过了

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

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

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

有没有人知道一种方法来获得跨浏览器的功能，以及功能标签?我能想到的最好的解决方案是手动添加onclick事件到标签?我真的很喜欢功能标签，因为我认为它更便于触摸。

您可以简单地在页面的其他任何地方添加额外的<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>

你可以点击其中一个，就会看到想要的效果。

使用额外的标签!

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

我的演示把它们放在前面，但你可以把它们放在后面(或其他任何地方)，并相应地设置它们的样式。你在文章中提到的CSS非常好，因为它非常具体，只有标签紧接在复选框后面，所以只要你的"真正的"标签不是那个，你就会很好。

相关文章：