<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3单选多选按钮美化特效 - 网页模板</title>
<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 async rel="stylesheet" href="https://cdn.materialdesignicons.com/1.8.36/css/materialdesignicons.min.css">
<link async rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css">
<link async rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/typicons/2.0.7/typicons.min.css">
<link async rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/demo.css">
<link rel="stylesheet" type="text/css" href="src/pretty.min.css">
</head>
<body>
<div class="container">
<h3 id="checkbox">基本的Checkbox</h3>
<div class="pretty">
<input type="checkbox">
<label><i class="mdi mdi-check"></i> Square</label>
</div>
<div class="pretty curvy">
<input type="checkbox">
<label><i class="mdi mdi-check"></i> Curvy</label>
</div>
<div class="pretty circle">
<input type="checkbox">
<label><i class="mdi mdi-check"></i> Circle</label>
</div>
<h3>自定义图标</h3>
<div class="pretty">
<input type="checkbox">
<label><i class="mdi mdi-texture"></i> Include</label>
</div>
<div class="pretty curvy">
<input type="checkbox">
<label><i class="mdi mdi-star"></i> Favorite</label>
</div>
<div class="pretty circle">
<input type="checkbox">
<label><i class="mdi mdi-record"></i> Add</label>
</div>
<h3>checkbox的颜色</h3>
<div class="pretty primary">
<input type="checkbox">
<label><i class="mdi mdi-check"></i> Primary</label>
</div>
<div class="pretty success">
<input type="checkbox">
<label><i class="mdi mdi-check"></i> Success</label>
</div>
<div class="pretty warning">
<input type="checkbox">
<label><i class="mdi mdi-check"></i> Warning</label>
</div>
<div class="pretty info">
<input type="checkbox">
<label><i class="mdi mdi-check"></i> Info</label>
</div>
<div class="pretty danger">
<input type="checkbox">
<label><i class="mdi mdi-check"></i> Danger</label>
</div>
<h3>checkbox边框颜色</h3>
<div class="pretty o-primary">
<input type="checkbox">
<label><i class="mdi mdi-check"></i> Primary</label>
</div>
<div class="pretty o-success">
<input type="checkbox">
<label><i class="mdi mdi-check"></i> Success</label>
</div>
<div class="pretty o-warning">
<input type="checkbox">
<label><i class="mdi mdi-check"></i> Warning</label>
</div>
<div class="pretty o-info">
<input type="checkbox">
<label><i class="mdi mdi-check"></i> Info</label>
</div>
<div class="pretty o-danger">
<input type="checkbox">
<label><i class="mdi mdi-check"></i> Danger</label>
</div>
<h3>鼠标滑过效果</h3>
<div class="pretty primary hover">
<input type="checkbox">
<label><i class="mdi mdi-check"></i> Solid</label>
</div>
<div class="pretty o-success hover">
<input type="checkbox">
<label><i class="mdi mdi-check"></i> Outline</label>
</div>
<h3>不带边框的checkbox</h3>
<div class="pretty o-success plain">
<input type="checkbox">
<label><i class="mdi mdi-check"></i> Include</label>
</div>
<div class="pretty o-danger plain">
<input type="checkbox">
<label><i class="mdi mdi-close"></i> Ignore</label>
</div>
<h3>平滑的动画效果</h3>
<div class="pretty smooth">
<input type="checkbox">
<label><i class="mdi mdi-check"></i> Jan</label>
</div>
<div class="pretty o-info circle smooth">
<input type="checkbox">
<label><i class="mdi mdi-check-all"></i> Feb</label>
</div>
<div class="pretty danger smooth">
<input type="checkbox">
<label><i class="mdi mdi-close"></i> Mar</label>
</div>
<div class="pretty success circle smooth">
<input type="checkbox">
<label><i class="mdi mdi-check"></i> Apr</label>
</div>
<h3>另类的checkbox动画效果</h3>
<div class="pretty info circle a-bounce">
<input type="checkbox">
<label><i class="mdi mdi-check"></i> Bounce</label>
</div>
<div class="pretty info circle a-jelly">
<input type="checkbox">
<label><i class="mdi mdi-check"></i> Jelly</label>
</div>
<div class="pretty info curvy a-tada">
<input type="checkbox">
<label><i class="mdi mdi-check"></i> Tada</label>
</div>
<div class="pretty info curvy a-vibrate">
<input type="checkbox">
<label><i class="mdi mdi-check"></i> Vibrate</label>
</div>
<div class="pretty info curvy a-rotate">
<input type="checkbox">
<label><i class="mdi mdi-check"></i> Rotate</label>
</div>
<h3>禁用checkbox</h3>
<div class="pretty inline">
<input type="checkbox" disabled>
<label><i class="mdi mdi-check"></i> Disabled</label>
</div>
<div class="pretty circle">
<input type="checkbox" disabled>
<label><i class="mdi mdi-check"></i> Disabled</label>
</div>
<div class="pretty success">
<input type="checkbox" checked disabled>
<label><i class="mdi mdi-check"></i> Disabled</label>
</div>
<hr>
<h2>checkbox切换效果</h2>
<h3>切换图标</h3>
<div class="pretty toggle">
<input type="checkbox">
<label><i class="mdi mdi-microphone"></i> ON</label>
<label><i class="mdi mdi-microphone-off"></i> OFF</label>
</div>
<h3>不带边框</h3>
<div class="pretty plain toggle">
<input type="checkbox">
<label><i class="mdi mdi-wifi"></i> WIFI ON</label>
<label><i class="mdi mdi-wifi-off"></i> WIFI OFF</label>
</div>
<h3>黑白色</h3>
<div class="pretty plain toggle">
<input type="checkbox">
<label><i class="mdi mdi-eye"></i> Preview</label>
<label><i class="mdi mdi-eye-off"></i> Preview</label>
</div>
<div class="pretty plain toggle">
<input type="checkbox">
<label><i class="mdi mdi-play"></i> Play</label>
<label><i class="mdi mdi-pause"></i> Pause</label>
</div>
<div class="pretty plain toggle">
<input type="checkbox">
<label><i class="mdi mdi-email-outline"></i> Read</label>
<label><i class="mdi mdi-email-open-outline"></i> Unread</label>
</div>
<h3>切换时改变颜色</h3>
<div class="pretty plain toggle">
<input type="checkbox">
<label><i class="mdi mdi-thumb-up success"></i> Good</label>
<label><i class="mdi mdi-thumb-down danger"></i> Bad</label>
</div>
<div class="pretty plain toggle">
<input type="checkbox">
<label><i class="mdi mdi-reply info"></i> Reply</label>
<label><i class="mdi mdi-share warning"></i> Forward</label>
</div>
<hr>
<h2>单选按钮</h2>
<h3>基本的单选按钮</h3>
<div class="pretty circle">
<input type="radio" name="radio1">
<label><i class="default"></i> Male</label>
</div>
<div class="pretty circle">
<input type="radio" name="radio1">
<label><i class="default"></i> Female</label>
</div>
<div class="pretty circle">
<input type="radio" name="radio1">
<label><i class="default"></i> Special</label>
</div>
<h3>单选按钮颜色</h3>
<div class="pretty circle primary">
<input type="radio" name="radio19">
<label><i class="default"></i> Primary</label>
</div>
<div class="pretty circle success">
<input type="radio" name="radio19">
<label><i class="default"></i> Success</label>
</div>
<div class="pretty circle info">
<input type="radio" name="radio19">
<label><i class=
