pretty.css是一款纯css3漂亮的checkbox和radio美化效果。pretty.css可以和多种字体图标结合使用，对原生的checkbox和radio进行美化，还可以制作按钮点击时的动画效果。
pretty.css支持的图标库有：
- FONT AWESOME
- BOOTSTRAP GLYPHICONS
- MATERIAL DESIGN ICONS (MDI)
- MATERIAL DESIGN ICONS (ZMDI)
- TYPICONS
- IONICONS
- GOOGLE MATERIAL DESIGN ICONS
安装
可以使用bower，npm或yarn来安装pretty.css。
bower install pretty-checkboxnpm install pretty-checkboxyarn add pretty-checkbox |
使用方法
在页面引入pretty.min.css文件。
<link rel="stylesheet" href="../PATH/pretty-checkbox/src/pretty.min.css"/> |
HTML结构
Checkbox的基本HTML结构如下：
<div class="pretty primary"> <input type="checkbox"/> <label><i class="mdi mdi-check"></i> Primary</label></div> |
Radio的基本HTML结构如下：
<div class="pretty"> <input type="radio" name="radio"> <label><i class="mdi mdi-check"></i> Option 1</label></div><div class="pretty"> <input type="radio" name="radio"> <label><i class="mdi mdi-check"></i> Option 2</label></div> |
其中mdi mdi-*是material design图标。如果你想使用fontawesome，可以修改为fa fa-close。
SCSS变量
pretty.css的基本scss变量设置如下：
$pretty--class-name: notsopretty; /* <div class="notsopretty circle"> */$pretty--border-radius: 0;$pretty--color-primary: #428bca;$pretty--color-success: #5cb85c;$pretty--color-info: #5bc0de;$pretty--color-warning: #f0ad4e;$pretty--color-danger: #d9534f;$pretty--color-border: #b9b9b9;$pretty--color-radio: #b9b9b9;$pretty--color-bg: #fff;/* Google material design icons */$pretty--gmdi-class-name:'g-mdi';$pretty--gmdi-name:'Material Icons';$pretty--gmdi-attr:'data-icon'; |
pretty.css的github地址为：https://lokesh-coder.github.io/pretty-checkbox/
