几十种checkbox和radio美化交互动画效果
代码语言：html
所属分类：表单美化
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<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">
<meta charset="UTF-8">
<title>BFW NEW PAGE</title>
<style>
.pretty>input+label>i.g-mdi:before,.pretty>input+label+label>i.g-mdi:before{content:attr(data-icon);display:inline-block;font:normal normal normal 24px/1 "Material Icons";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-transform:translate(0, 0);transform:translate(0, 0)}@media print{.pretty>input:not(:checked)+label i:before{-webkit-print-color-adjust:exact;print-color-adjust:exact;color:transparent !important}.pretty :not(.toggle) input:not(:checked)+label i:before,.pretty>input[type='radio']:checked+label>i.default:before,.pretty i:after{-webkit-print-color-adjust:exact;print-color-adjust:exact;color:transparent !important}.pretty input:checked+label i:before{-webkit-print-color-adjust:exact;print-color-adjust:exact}.pretty.primary input:checked+label i:before{color:white !important}.pretty.success input:checked+label i:before{color:white !important}.pretty.info input:checked+label i:before{color:white !important}.pretty.warning input:checked+label i:before{color:white !important}.pretty.danger input:checked+label i:before{color:white !important}}.pretty{line-height:1;position:relative;display:inline-block;margin:0 10px 5px 0}.pretty label{font-weight:normal}.pretty>input[type='checkbox'],.pretty>input[type='radio']{position:absolute;z-index:99999999;top:0;left:0;display:block;width:100%;height:100%;margin:0;cursor:pointer;opacity:0}.pretty i{font-size:1em !important;position:relative;display:inline-block;box-sizing:initial;min-width:1em;margin-right:2px;padding:1px;text-align:center}.pretty i:before{position:relative;z-index:999;left:0;display:inline-block;vertical-align:bottom;color:transparent;background-color:#fff}.pretty i:after{position:absolute;top:0;left:0;width:100%;height:100%;content:'\0000';color:transparent;border:1px solid #b9b9b9;border-radius:0}.pretty>input[type='checkbox']:checked+label>i:before,.pretty>input[type='radio']:checked+label>i:before{color:inherit;background-color:#fff}.pretty>input[type='radio']+label>i.default:before{left:0;min-width:1em;content:'\0000';color:transparent;border-radius:0;background:#fff;-webkit-transform:scale(0.8);transform:scale(0.8)}.pretty>input[type='radio']:checked+label>i.default:before{background-color:#b9b9b9 !important}.pretty>input[type='checkbox'][disabled],.pretty>input[type='radio'][disabled]{cursor:not-allowed;opacity:0}.pretty>input[type='checkbox'][disabled]+label,.pretty>input[type='radio'][disabled]+label{cursor:not-allowed;opacity:0.5}.pretty.plain>input[type='checkbox']:checked+label>i:after,.pretty.plain>input[type='radio']:checked+label>i:after{border-color:transparent}.pretty.plain>input[type='checkbox']+label+label>i:after,.pretty.plain>input[type='radio']+label+label>i:after{border-color:transparent}.pretty.plain>input[type='checkbox']:checked+label+label>i:after,.pretty.plain>input[type='radio']:checked+label+label>i:after{border-color:transparent}.pretty.plain.toggle>input[type='checkbox']+label>i:after,.pretty.plain.toggle>input[type='radio']+label>i:after{border-color:transparent}.pretty.circle label i{padding:2px}.pretty.circle label i:after,.pretty.circle label i:before{border-radius:100px}.pretty.circle label i.default:before{border-radius:100px !important}.pretty.curvy label i:after,.pretty.curvy label i:before{border-radius:2px}.pretty.curvy label i.default:before{border-radius:2px !important}.pretty.primary input:checked+label i:before{color:#fff;background-color:#428bca !important}.pretty.primary input:checked+label i:after{border-color:#428bca;background-color:#428bca !important}.pretty.primary input[type='radio']:checked+label i.default:before{background-color:#428bca !important;color:transparent}.pretty.primary input[type='radio']:checked+label i.default:after{background-color:initial !important;border-color:#428bca}.pretty.primary.smooth input:checked ~ label i:after{-webkit-transform:scale(1) !important;transform:scale(1) !important}.pretty.o-primary input:checked+label i:before{color:#428bca}.pretty.o-primary input:checked+label i:after{border-color:#428bca}.pretty.toggle i.primary:before{color:#428bca !important}.pretty.toggle i.success:before{color:#5cb85c !important}.pretty.toggle i.info:before{color:#5bc0de !important}.pretty.toggle i.warning:before{color:#f0ad4e !important}.pretty.toggle i.danger:before{color:#d9534f !important}.pretty.success input:checked+label i:before{color:#fff;background-color:#5cb85c !important}.pretty.success input:checked+label i:after{border-color:#5cb85c;background-color:#5cb85c !important}.pretty.success input[type='radio']:checked+label i.default:before{background-color:#5cb85c !important;color:transparent}.pretty.success input[type='radio']:checked+label i.default:after{background-color:initial !important;border-color:#5cb85c}.pretty.success.smooth input:checked ~ label i:after{-webkit-transform:scale(1) !important;transform:scale(1) !important}.pretty.o-success input:checked+label i:before{color:#5cb85c}.pretty.o-success input:checked+label i:after{border-color:#5cb85c}.pretty.toggle i.primary:before{color:#428bca !important}.pretty.toggle i.success:before{color:#5cb85c !important}.pretty.toggle i.info:before{color:#5bc0de !important}.pretty.toggle i.warning:before{color:#f0ad4e !important}.pretty.toggle i.danger:before{color:#d9534f !important}.pretty.info input:checked+label i:before{color:#fff;background-color:#5bc0de !important}.pretty.info input:checked+label i:after{border-color:#5bc0de;background-color:#5bc0de !important}.pretty.info input[type='radio']:checked+label i.default:before{background-color:#5bc0de !important;color:transparent}.pretty.info input[type='radio']:checked+label i.default:after{background-color:initial !important;border-color:#5bc0de}.pretty.info.smooth input:checked ~ label i:after{-webkit-transform:scale(1) !important;transform:scale(1) !important}.pretty.o-info input:checked+label i:before{color:#5bc0de}.pretty.o-info input:checked+label i:after{border-color:#5bc0de}.pretty.toggle i.primary:before{color:#428bca !important}.pretty.toggle i.success:before{color:#5cb85c !important}.pretty.toggle i.info:before{color:#5bc0de !important}.pretty.toggle i.warning:before{color:#f0ad4e !important}.pretty.toggle i.danger:before{color:#d9534f !important}.pretty.warning input:checked+label i:before{color:#fff;background-color:#f0ad4e !important}.pretty.warning input:checked+label i:after{border-color:#f0ad4e;background-color:#f0ad4e !important}.pretty.warning input[type='radio']:checked+label i.default:before{background-color:#f0ad4e !important;color:transparent}.pretty.warning input[type='radio']:checked+label i.default:after{background-color:initial !important;border-color:#f0ad4e}.pretty.warning.smooth input:checked ~ label i:after{-webkit-transform:scale(1) !important;transform:scale(1) !important}.pretty.o-warning input:checked+label i:before{color:#f0ad4e}.pretty.o-warning input:checked+label i:after{border-color:#f0ad4e}.pretty.toggle i.primary:before{color:#428bca !important}.pretty.toggle i.success:before{color:#5cb85c !important}.pretty.toggle i.info:before{color:#5bc0de !important}.pretty.toggle i.warning:before{color:#f0ad4e !important}.pretty.toggle i.danger:before{color:#d9534f !important}.pretty.danger input:checked+label i:before{color:#fff;background-color:#d9534f !important}.pretty.danger input:checked+label i:after{border-color:#d9534f;background-color:#d9534f !important}.pretty.danger input[type='radio']:checked+label i.default:before{background-color:#d9534f !important;color:transparent}.pretty.danger input[type='radio']:checked+label i.default:after{background-color:initial !important;border-color:#d9534f}.pretty.danger.smooth input:checked ~ label i:after{-webkit-transform:scale(1) !important;transform:scale(1) !important}.pretty.o-danger input:checked+label i:before{color:#d9534f}.pretty.o-danger input:checked+label i:after{border-color:#d9534f}.pretty.toggle i.primary:before{color:#428bca !important}.pretty.toggle i.success:before{color:#5cb85c !important}.pretty.toggle i.info:before{color:#5bc0de !important}.pretty.toggle i.warning:before{color:#f0ad4e !important}.pretty.toggle i.danger:before{color:#d9534f !important}.pretty.toggle>input[type='checkbox']+label>i:before,.pretty.toggle>input[type='radio']+label>i:before{color:inherit}.pretty.toggle>input[type='checkbox']+label+label,.pretty.toggle>input[type='radio']+label+label{display:none}.pretty.toggle>input[type='checkbox']:checked+label,.pretty.toggle>input[type='radio']:checked+label{display:none}.pretty.toggle>input[type='checkbox']:checked+label+label,.pretty.toggle>input[type='radio']:checked+label+label{display:inline-block}.pretty.toggle>input[type='checkbox']:checked+label+label>i:before,.pretty.toggle>input[type='radio']:checked+label+label>i:before{color:inherit}.pretty.primary.hover:hover input+label i:before{background-color:rgba(66,139,202,0.5) !important;color:#fff !important}.pretty.primary.hover:hover input+label i:after{border-color:rgba(66,139,202,0.5) !important}.pretty.o-primary.hover:hover input+label i:before{color:rgba(66,139,202,0.8)}.pretty.success.hover:hover input+label i:before{background-color:rgba(92,184,92,0.5) !important;color:#fff !important}.pretty.success.hover:hover input+label i:after{border-color:rgba(92,184,92,0.5) !important}.pretty.o-success.hover:hover input+label i:before{color:rgba(92,184,92,0.8)}.pretty.info.hover:hover input+label i:before{background-color:rgba(91,192,222,0.5) !important;color:#fff !important}.pretty.info.hover:hover input+label i:after{border-color:rgba(91,192,222,0.5) !important}.pretty.o-info.hover:hover input+label i:before{color:rgba(91,192,222,0.8)}.pretty.warning.hover:hover input+label i:before{background-color:rgba(240,173,78,0.5) !important;color:#fff !important}.pretty.warning.hover:hover input+label i:after{border-color:rgba(240,173,78,0.5) !important}.pretty.o-warning.hover:hover input+label i:before{color:rgba(240,173,78,0.8)}.pretty.danger.hover:hover input+label i:before{background-color:rgba(217,83,79,0.5) !important;color:#fff !important}.pretty.danger.hover:hover input+label i:after{border-color:rgba(217,83,79,0.5) !important}.pretty.o-danger.hover:hover input+label i:before{color:rgba(217,83,79,0.8)}.pretty.smooth i:before{-webkit-transition:all .5s ease;transition:all .5s ease;-webkit-transform:scale(0);transform:scale(0)}.pretty.smooth i:after{-webkit-transition:all .5s ease;transition:all .5s ease}.pretty.smooth>input[type='checkbox']:checked ~ label>i:before,.pretty.smooth>input[type='radio']:checked ~ label>i:before{-webkit-transform:scale(1);transform:scale(1)}.pretty.smooth>input[type='checkbox']:checked ~ label>i:after,.pretty.smooth>input[type='radio']:checked ~ label>i:after{-webkit-transform:scale(0);transform:scale(0)}.pretty.smooth>input[type='radio']:checked ~ label>i.default:before{-webkit-transform:scale(0.8);transform:scale(0.8)}.pretty.smooth>input[type='radio']:checked ~ label>i.default:after{-webkit-transform:scale(1);transform:scale(1)}.pretty.smooth.toggle i:before{-webkit-transform:none;transform:none}.pretty.smooth.toggle>input[type='checkbox']:checked ~ label>i:before,.pretty.smooth.toggle>input[type='radio']:checked ~ label>i:before{-webkit-transform:none;transform:none}.pretty.smooth.toggle>input[type='checkbox']:checked ~ label>i:after,.pretty.smooth.toggle>input[type='radio']:checked ~ label>i:after{-webkit-transform:none;transform:none}@-webkit-keyframes tada{0%{-webkit-transform:scale(7);transform:scale(7);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}38%{-webkit-transform:scale(1);transform:scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;opacity:1}55%{-webkit-transform:scale(1.5);transform:scale(1.5);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}72%{-webkit-transform:scale(1);transform:scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}81%{-webkit-transform:scale(1.24);transform:scale(1.24);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}89%{-webkit-transform:scale(1);transform:scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}95%{-webkit-transform:scale(1.04);transform:scale(1.04);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-webkit-transform:scale(1);transform:scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}@keyframes tada{0%{-webkit-transform:scale(7);transform:scale(7);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}38%{-webkit-transform:scale(1);transform:scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;opacity:1}55%{-webkit-transform:scale(1.5);transform:scale(1.5);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}72%{-webkit-transform:scale(1);transform:scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}81%{-webkit-transform:scale(1.24);transform:scale(1.24);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}89%{-webkit-transform:scale(1);transform:scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}95%{-webkit-transform:scale(1.04);transform:scale(1.04);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-webkit-transform:scale(1);transform:scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}@-webkit-keyframes bounce{0%{-webkit-transform:translateY(-50px);transform:translateY(-50px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}38%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;opacity:1}55%{-webkit-transform:translateY(-30px);transform:translateY(-30px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}72%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}81%{-webkit-transform:translateY(-18px);transform:translateY(-18px);-webkit-animation-timing-function:ease-in}90%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}95%{-webkit-transform:translateY(-8px);transform:translateY(-8px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}@keyframes bounce{0%{-webkit-transform:translateY(-50px);transform:translateY(-50px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}38%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;opacity:1}55%{-webkit-transform:translateY(-30px);transform:translateY(-30px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}72%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}81%{-webkit-transform:translateY(-18px);transform:translateY(-18px);-webkit-animation-timing-function:ease-in}90%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}95%{-webkit-transform:translateY(-8px);transform:translateY(-8px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}@-webkit-keyframes rotate{0%{-webkit-transform:translateZ(-200px) rotate(-45deg);transform:translateZ(-200px) rotate(-45deg);opacity:0}100%{-webkit-transform:translateZ(0) rotate(0);transform:translateZ(0) rotate(0);opacity:1}}@keyframes rotate{0%{-webkit-transform:translateZ(-200px) rotate(-45deg);transform:translateZ(-200px) rotate(-45deg);opacity:0}100%{-webkit-transform:translateZ(0) rotate(0);transform:translateZ(0) rotate(0);opacity:1}}@-webkit-keyframes jelly{0%{-webkit-transform:scale3d(1, 1, 1);transform:scale3d(1, 1, 1)}30%{-webkit-transform:scale3d(0.75, 1.25, 1);transform:scale3d(0.75, 1.25, 1)}40%{-webkit-transform:scale3d(1.25, 0.75, 1);transform:scale3d(1.25, 0.75, 1)}50%{-webkit-transform:scale3d(0.85, 1.15, 1);transform:scale3d(0.85, 1.15, 1)}65%{-webkit-transform:scale3d(1.05, 0.95, 1);transform:scale3d(1.05, 0.95, 1)}75%{-webkit-transform:scale3d(0.95, 1.05, 1);transform:scale3d(0.95, 1.05, 1)}100%{-webkit-transform:scale3d(1, 1, 1);transform:scale3d(1, 1, 1)}}@keyframes jelly{0%{-webkit-transform:scale3d(1, 1, 1);transform:scale3d(1, 1, 1)}30%{-webkit-transform:scale3d(0.75, 1.25, 1);transform:scale3d(0.75, 1.25, 1)}40%{-webkit-transform:scale3d(1.25, 0.75, 1);transform:scale3d(1.25, 0.75, 1)}50%{-webkit-transform:scale3d(0.85, 1.15, 1);transform:scale3d(0.85, 1.15, 1)}65%{-webkit-transform:scale3d(1.05, 0.95, 1);transform:scale3d(1.05, 0.95, 1)}75%{-webkit-transform:scale3d(0.95, 1.05, 1);transform:scale3d(0.95, 1.05, 1)}100%{-webkit-transform:scale3d(1, 1, 1);transform:scale3d(1, 1, 1)}}@-webkit-keyframes vibrate{0%{-webkit-transform:translate(0);transform:translate(0)}10%{-webkit-transform:translate(-2px, -2px);transform:translate(-2px, -2px)}20%{-webkit-transform:translate(2px, -2px);transform:translate(2px, -2px)}30%{-webkit-transform:translate(-2px, 2px);transform:translate(-2px, 2px)}40%{-webkit-transform:translate(2px, 2px);transform:translate(2px, 2px)}50%{-webkit-transform:translate(-2px, -2px);transform:translate(-2px, -2px)}60%{-webkit-transform:translate(2px, -2px);transform:translate(2px, -2px)}70%{-webkit-transform:translate(-2px, 2px);transform:translate(-2px, 2px)}80%{-webkit-transform:translate(-2px, -2px);transform:translate(-2px, -2px)}90%{-webkit-transform:translate(2px, -2px);transform:translate(2px, -2px)}100%{-webkit-transform:translate(0);transform:translate(0)}}@keyframes vibrate{0%{-webkit-transform:translate(0);transform:translate(0)}10%{-webkit-transform:translate(-2px, -2px);transform:translate(-2px, -2px)}20%{-webkit-transform:translate(2px, -2px);transform:translate(2px, -2px)}30%{-webkit-transform:translate(-2px, 2px);transform:translate(-2px, 2px)}40%{-webkit-transform:translate(2px, 2px);transform:translate(2px, 2px)}50%{-webkit-transform:translate(-2px, -2px);transform:translate(-2px, -2px)}60%{-webkit-transform:translate(2px, -2px);transform:translate(2px, -2px)}70%{-webkit-transform:translate(-2px, 2px);transform:translate(-2px, 2px)}80%{-webkit-transform:translate(-2px, -2px);transform:translate(-2px, -2px)}90%{-webkit-transform:translate(2px, -2px);transform:translate(2px, -2px)}100%{-webkit-transform:translate(0);transform:translate(0)}}.pretty.a-tada>input[type='checkbox']:checked+label>i,.pretty.a-tada>input[type='radio']:checked+label>i{-webkit-animation:tada 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;animation:tada 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both}.pretty.a-bounce>input[type='checkbox']:checked+label>i,.pretty.a-bounce>input[type='radio']:checked+label>i{-webkit-animation:bounce 1.1s both;animation:bounce 1.1s both}.pretty.a-rotate>input[type='checkbox']:checked+label>i,.pretty.a-rotate>input[type='radio']:checked+label>i{-webkit-animation:rotate 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;animation:rotate 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both}.pretty.a-jelly>input[type='checkbox']:checked+label>i,.pretty.a-jelly>input[type='radio']:checked+label>i{-webkit-animation:jelly 0.9s both;animation:jelly 0.9s both}.pretty.a-vibrate>input[type='checkbox']:checked+label>i,.pretty.a-vibrate>input[type='radio']:checked+label>i{-webkit-animation:vibrate 0.5s linear infinite both;animation:vibrate 0.5s linear infinite both}
</style>
</head>
<body> <div class="htmleaf-container">
<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 .........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0