几十种checkbox和radio美化交互动画效果-html代码-BFW代码库

代码语言：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:#f0ad4.........完整代码请登录后点击上方下载按钮下载查看
几十种checkbox和radio美化交互动画效果

网友评论0

div+css布局实现彩色泡泡磨砂玻璃登录表单效果代码

js+css实现炫酷被外形飞船回收的登录表单页面代码

dyform可视化表单拖拽json生成器代码

jquery+css实现动态背景登录表单页面代码

jquery+css实现动态背景用户密码验证码发送登录表单代码

css美化range实现曲线波浪滑竿效果代码

range美化成金属质感不锈钢旋钮可拖动效果代码

range美化彩虹滑动取值器滑块效果代码

css美化range成音量调节器代码

css美化radio单选按钮实现动画效果代码
