纯css3漂亮的checkbox和radio美化效果插件Pretty.css插

插件介绍

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

蕉城网站建设公司成都创新互联公司,蕉城网站设计制作，有大型网站制作公司丰富经验。已为蕉城上千提供企业网站建设服务。企业网站搭建\成都外贸网站制作要多少钱，请找那个售后服务好的蕉城做网站的公司定做！

浏览器兼容性

教程

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  
web前端开发学习Q-q-u-n： 731771211，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频，PDF）

使用方法

在页面引入pretty.min.css文件及所需要的字体图标库文件

<link rel="stylesheet" href="../PATH/pretty-checkbox/src/pretty.min.css"/>      
<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="http://cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.materialdesignicons.com/1.8.36/css/materialdesignicons.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/typicons/2.0.7/typicons.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.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.i...

注：更多关于美化checkbox和radio的插件，欢迎大家评论留言，谢谢。

文章名称：纯css3漂亮的checkbox和radio美化效果插件Pretty.css插
网站路径：https://www.cdcxhl.com/article46/gsgghg.html

成都网站建设公司_创新互联，为您提供云服务器、电子商务、品牌网站设计、用户体验、外贸网站建设、商城网站

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联