纯css3漂亮的checkbox和radio美化效果

当前位置:主页 > CSS3库 > UI界面设计 > 纯css3漂亮的checkbox和radio美化效果
小编推荐: 掘金是国内最活跃的技术社区,从 jQuery到vue,从前端教程到开源库,无论是入门还是进阶,来掘金你不会错过前端开发的任何一个技术干货。
纯css3漂亮的checkbox和radio美化效果
分享:

    插件介绍

    pretty.css是一款纯css3漂亮的checkbox和radio美化效果。pretty.css可以和多种字体图标结合使用,对原生的checkbox和radio进行美化,还可以制作按钮点击时的动画效果。

    浏览器兼容性

    浏览器兼容性
    时间:2017-08-16
    阅读:
简要教程

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-checkbox
npm install pretty-checkbox
yarn 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/

网友评论