在过去的几天里,我一直致力于创建一些使用伪元素、SVG 动画和其他一些技术的创意复选框。对于一些人来说,我使用了一点 Javascript 来提供更多选项。
对我来说一个很大的烦恼是复选框返回的值是 on 和 off,所以对于这些我创建了一个隐藏的输入,它为一些具有多个选项的复选框返回值 1、0 或介于两者之间的数字. 这意味着您可以使用 class 直接从这个隐藏的输入中访问复选框值.hidden-value。
同样,我已将复选框的值放在属性.checkbox-container下的元素上data-value,为您提供了很大的灵活性。
CSS 中的自定[……]