纯css3漂亮的复选框和单选美化效果插件Pretty.css插件

时间：2023-04-02 14:33:14 HTML

插件介绍pretty.css是一个纯css3漂亮的复选框和单选美化效果。pretty.css可以结合多种字体图标来美化原生的checkbox和radio，也可以制作按钮被点击时的动画效果。浏览器兼容性演示地址：http://demo.jb51.net/js/2017/...教程pretty.css是一个纯css3漂亮的checkbox和radio美化效果。pretty.css可以结合多种字体图标来美化原生的checkbox和radio，也可以制作按钮被点击时的动画效果。pretty.css支持的图标库有：FONTAWESOMEBOOTSTRAPGLYPHICONSMATERIALDESIGNICONS(MDI)MATERIALDESIGNICONS(ZMDI)TYPICONSIONICONSGOOGLEMATERIALDESIGNICONS安装您可以使用bower、npm或yarn安装pretty.css。bowerinstallpretty-checkboxnpminstallpretty-checkboxyarnaddpretty-checkbox使用方法在页面引入pretty.min.css文件和需要的字体图标库文件HTML结构Checkbox的基本HTML结构如下：Primary

Radio的基本HTML结构如下：

选项1

选项2

其中mdimdi-*是一种材质设计图标如果想使用fontawesome，可以修改为fafa-closeSCSS变量pretty.csspretty.css的基本scss变量设置如下：$pretty--class-name:notsopretty;/**/$pretty--border-radius:0;$pretty--color-primary:#428bca;$pretty--color-success:#5cb85c;$pretty--color-info:#5bc0de;$pretty--color-warning:#f0ad4e;$pretty--color-危险：#d9534f；$pretty--color-border：#b9b9b9；$pretty--color-radio：#b9b9b9；$pretty--color-bg：#fff；/*谷歌材料设计图标*/$pretty--gmdi-class-name:'g-mdi';$pretty--gmdi-name:'MaterialIcons';$pretty--gmdi-attr:'data-icon';pretty.cssgithub地址为：https://lokesh-coder.github.i...注：更多美化checkbox和radio的插件，欢迎评论留言，谢谢。