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

eechen 发布于2019-08-30 15:44 / 1676人阅读

摘要：插件介绍是一款纯漂亮的和美化效果。可以和多种字体图标结合使用，对原生的和进行美化，还可以制作按钮点击时的动画效果。支持的图标库有安装可以使用，或来安装。

插件介绍

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

浏览器兼容性

演示地址：http://demo.jb51.net/js/2017/...

教程

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文件及所需要的字体图标库文件

HTML结构

Checkbox的基本HTML结构如下：


  
   Primary

Radio的基本HTML结构如下：


  
   Option 1


  
   Option 2

其中mdi mdi-*是material design图标。如果你想使用fontawesome，可以修改为fa fa-close

SCSS变量

pretty.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-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的插件，欢迎大家评论留言，谢谢。

混合云服务器托管 js漂亮的效果 wordpress无法搜索和安装插件 javaee的插件 koajs的插件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116256.html

总结：如何修改美化radio、checkbox的默认样式

摘要：现在前端页面效果日益丰富，默认的组件样式显然不能满足设计需求。前段时间开发项目中刚好接触到相关的需求，在此特地整理下修改样式的方法。它使用纯编写，没有任何的文件。现在前端页面效果日益丰富，默认的input组件样式显然不能满足设计需求。前段时间开发项目中刚好接触到相关的需求，在此特地整理下修改radio、CheckBox样式的方法。原理：大致原理都是使用原生的checkbox或inp...

asce1885 2019-08-02 12:09 评论0 收藏0
总结：如何修改美化radio、checkbox的默认样式

摘要：现在前端页面效果日益丰富，默认的组件样式显然不能满足设计需求。前段时间开发项目中刚好接触到相关的需求，在此特地整理下修改样式的方法。它使用纯编写，没有任何的文件。现在前端页面效果日益丰富，默认的input组件样式显然不能满足设计需求。前段时间开发项目中刚好接触到相关的需求，在此特地整理下修改radio、CheckBox样式的方法。原理：大致原理都是使用原生的checkbox或inp...

Anshiii 2019-08-29 17:26 评论0 收藏0
总结：如何修改美化radio、checkbox的默认样式

摘要：现在前端页面效果日益丰富，默认的组件样式显然不能满足设计需求。前段时间开发项目中刚好接触到相关的需求，在此特地整理下修改样式的方法。它使用纯编写，没有任何的文件。现在前端页面效果日益丰富，默认的input组件样式显然不能满足设计需求。前段时间开发项目中刚好接触到相关的需求，在此特地整理下修改radio、CheckBox样式的方法。原理：大致原理都是使用原生的checkbox或inp...

bergwhite 2019-08-05 15:36 评论0 收藏0
纯CSS3美化 input 的checkbox 和 radio

摘要：样式复选框和单选按钮看起来更漂亮。在线源码使用你需要引入或者文件到你的工程或者中。 magic-input CSS3样式复选框和单选按钮看起来更漂亮。只有一个input元素。在线demo源码：https://github.com/jaywcjlove/magic-input 使用 $ npm install magic-input 你需要引入 dist/magic-input.css或...

lsxiao 2019-08-30 12:59 评论0 收藏0
纯CSS3美化 input 的checkbox 和 radio

摘要：样式复选框和单选按钮看起来更漂亮。在线源码使用你需要引入或者文件到你的工程或者中。 magic-input CSS3样式复选框和单选按钮看起来更漂亮。只有一个input元素。在线demo源码：https://github.com/jaywcjlove/magic-input 使用 $ npm install magic-input 你需要引入 dist/magic-input.css或...

PascalXie 2019-08-05 17:47 评论0 收藏0