寻找您的网站的自定义复选框UI样式 ? 看看GitHub上免费托管的CSS Checkbox库 。
这个庞大的库支持复选框样式的数十种样式 ,例如滑块,开/关设计,圆形和正方形以及许多其他形状。
您可以完全访问HTML / CSS代码 ,因此在您的网站上启动并运行它很容易。 更不用说它也是完全开源的, 可用于个人和商业项目 。
![CSS复选框库演示](https://i-blog.csdnimg.cn/blog_migrate/37fa0f050d45644e76f1ea392812df3f.png)
首先,您可以访问GitHub存储库并将所有文件本地下载到您的计算机上 。 或者,您可以通过npm安装该库。
默认情况下, 每种复选框样式都有其自己的class 。 checkboxes.min.css
样式表具有您所需的一切,因此,如果页面中包含这些内容,则一切就绪。
每个复选框样式都支持现代浏览器和大多数旧版浏览器 ,包括IE9 + 。
这个库的工作流程也许是我见过的最简单的工作流程。 将样式表添加到页面后,只需在主要演示中浏览所有样式,然后看看有什么突出之处。
从那里,您可以选择最合适的方法。 单击HTML按钮将显示一个模式框,其中包含该复选框的源代码 。 现在,只需将其复制/粘贴到您的站点中, 为其提供正确的名称/值 (如果适用),就可以完成工作!
无需麻烦,只需很少的自定义,并且基本上不需要编码技能。
您会注意到每种复选框样式都有浅色和深色主题 ,以获得更多支持。 这意味着您可以轻松找到适合您网站的复选框。 另外,您可以使用其他类,例如.ckbx-small
或.ckbx-xlarge
来增加大小。
拥有25多种不同的样式和许多不同的动画 ,我不得不说这个CSS Checkbox库令人印象深刻。 非常适合希望节省工作时间并改进任何Web窗体的UI设计的任何前端开发人员。
翻译自: https://www.hongkiat.com/blog/css-checkboxes-freebie-library/