CSS美化 Radio单选按钮 和 Checkbox多选框

查看演示

HTML代码：

   <h1>美化 Radio 和 Checkbox</h1>
    <h2>美化 radio</h2>
    <h3>有简单的背景动画：</h3>
    <!-- 有简单的背景动画： -->
    <label class="bui-radios-label bui-radios-anim">
      <input type="radio" name="sex" /><i class="bui-radios"></i> 男
    </label>
    <label class="bui-radios-label bui-radios-anim">
      <input type="radio" name="sex" checked=""><i class="bui-radios"></i> 女
    </label>
    <h3>无动画</h3>
    <!-- 无动画 -->
    <label class="bui-radios-label">
      <input type="radio" name="sex"><i class="bui-radios"></i> 男
    </label>
    <label class="bui-radios-label">
      <input type="radio" name="sex"><i class="bui-radios"></i> 女
    </label>
    <h3>禁用状态(disabled)</h3>
    <!-- 禁用状态(disabled) -->
    <label class="bui-radios-label">
      <input type="radio" name="sex" disabled=""><i class="bui-radios"></i> 不男不女
    </label>
    <label class="bui-radios-label">
      <input type="radio" name="ddd" disabled="" checked=""><i class="bui-radios"></i> 不男不女
    </label>
    <h2>美化 checkbox</h2>
    <h3>有简单的背景动画</h3>
<!--有简单的背景动画：-->
<label class="bui-checkbox-label  bui-checkbox-anim">
  <input type="checkbox" checked="" name="sex"/><i class="bui-checkbox"></i> 男
</label>
<label class="bui-checkbox-label  bui-checkbox-anim">
  <input type="checkbox" name="sex"/><i class="bui-checkbox"></i> 女
</label>
<h3>无动画</h3>
<!--无动画：-->
<label class="bui-checkbox-label">
  <input type="checkbox" checked="" name="sex"/><i class="bui-checkbox"></i> 男
</label>
<label class="bui-checkbox-label">
  <input type="checkbox" name="sex"/><i class="bui-checkbox"></i> 女
</label>
<h3>禁用状态（disabled）：</h3>
<!--禁用状态（disabled）：-->
<label class="bui-checkbox-label">
  <input type="checkbox" disabled="" name="sex"/><i class="bui-checkbox"></i> 不男不女
</label>
<label class="bui-checkbox-label">
  <input type="checkbox" checked="" disabled="" name="ddd"/><i class="bui-checkbox"></i> 不男不女
</label>
<h2>用checkbox模拟switch</h2>
<h3>简单的过渡动画:</h3>
<!--简单的过渡动画：-->
<label class="bui-switch-label bui-switch-anim">
  <input type="checkbox" name="s"/><i class="bui-switch"></i>
</label>
<label class="bui-switch-label bui-switch-anim">
  <input type="checkbox" checked="" name="s"/><i class="bui-switch"></i>
</label>
<h3>简单的背景动画：</h3>
<!--简单的背景动画：-->
<label class="bui-switch-label bui-switch-animbg">
  <input type="checkbox" name="s"/><i class="bui-switch"></i>
</label>
<label class="bui-switch-label bui-switch-animbg">
  <input type="checkbox" checked="" name="s"/><i class="bui-switch"></i>
</label>
<h3>无动画</h3>
<!--无动画：-->
<label class="bui-switch-label ">
  <input type="checkbox" name="s"/><i class="bui-switch"></i>
</label>
<label class="bui-switch-label ">
  <input type="checkbox" checked="" name="s"/><i class="bui-switch"></i>
</label>
<h3>禁用状态（disabled）：</h3>
<!--禁用状态（disabled）：-->
<label class="bui-switch-label">
  <input type="checkbox" disabled="" name="sex"/><i class="bui-switch"></i> 不男不女
</label>
<label class="bui-switch-label">
  <input type="checkbox" checked="" disabled="" name="ddd"/><i class="bui-switch"></i> 不男不女
</label>

CSS代码：

/*reset*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{padding:0;margin:0;line-height:1.5;}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
address,caption,cite,code,dfn,em,th,var,i{font-weight:normal;font-style:normal}
ol,ul{list-style:none}
caption,th{text-align: left;}
h1,h2,h3,h4,h5,h6{font-weight: 700;}
h1{font-size:36px;
    line-height:2;
    height: 60px;
    text-align: center;}
h2{font-size:24px;line-height:2;margin: 20px 0}
h3{font-size:18px;margin: 10px 0}
h4{font-size:14px}
h5{font-size:12px}
h6{font-size:12px}
q:before,q:after{content:''}
button{    padding:0;}
abbr,acronym{border:0}
hr {clear: both; display: block; height: 1px;
  border: 0 none;
  border-bottom: 1px solid #e7e7eb;}
blockquote{color:#666;font-style:italic;}
sup,sub{line-height:0}
abbr,acronym{border-bottom:1px dotted #666}
pre{white-space:pre;}
pre,code,tt{font:12px 'andale mono', 'lucida console', monospace;line-height:1.5}
/*clear clearfix*/
.clearfix:after {content:"\0020"; display: block; height: 0;clear: both; visibility: hidden; }
.clearfix {zoom: 1;}

@font-face {
  font-family: 'iconfont';  /* project id 654068 */
  src: url('//at.alicdn.com/t/font_654068_a978jt0cq5swnrk9.eot');
  src: url('//at.alicdn.com/t/font_654068_a978jt0cq5swnrk9.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_654068_a978jt0cq5swnrk9.woff') format('woff'),
  url('//at.alicdn.com/t/font_654068_a978jt0cq5swnrk9.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_654068_a978jt0cq5swnrk9.svg#iconfont') format('svg');
}

.iconfont {
  display: inline-block;
  font-family: 'iconfont';
  font-style: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
          -webkit-transform: translate(0, 0);
              -ms-transform: translate(0, 0);
                  transform: translate(0, 0);
  -webkit-text-stroke-width: 0.2px;
}

/* Links */
a {
    color: #4F9FE9;
    text-decoration: none
}

a:hover {
    text-decoration: underline;
}
a:focus, a:hover, a:active {
  outline: 0;
}


.example-con{padding:50px 50px 0; }
/* radio */
label.bui-radios-label input{position: absolute; opacity: 0;visibility: hidden;}
label.bui-radios-label .bui-radios{display: inline-block; position: relative; width: 13px; height: 13px; background: #fff; border:1px solid #979797;border-radius: 50%; vertical-align: -2px;}
label.bui-radios-label input:checked + .bui-radios{background: #00B066; border:1px solid #00B066;}
label.bui-radios-label input:checked + .bui-radios::after{position: absolute; content: ""; width: 7px; height: 7px; background: #fff; border-radius: 50%; top:3px; left: 3px;}
label.bui-radios-label input:disabled + .bui-radios{background-color:#e8e8e8; border:1px solid #c1c1c1;}
label.bui-radios-label input:disabled + .bui-radios::after{background-color: #c1c1c1;}
label.bui-radios-label.bui-radios-anim .bui-radios{-webkit-transition: background-color ease-out .3s; transition:background-color ease-out .3s}

/* checkbox */
label.bui-checkbox-label input{position: absolute; visibility: hidden; opacity: 0;}
label.bui-checkbox-label .bui-checkbox{display: inline-block; position: relative; width: 13px; height: 13px; background-color: #fff; border: 1px solid #979797; border-radius: 2px; vertical-align: -2px;}
label.bui-checkbox-label input:checked + .bui-checkbox{background-color: #00B066; border: 1px solid #00B066;}
label.bui-checkbox-label input:checked + .bui-checkbox:after{content: "\e600"; color: #fff; font-family: iconfont; width: 13px; height: 13px; font-size: 13px; line-height: 13px; position: absolute; left: 0; top: 1px;}
label.bui-checkbox-label input:disabled + .bui-checkbox{background-color: #e8e8e8;border: solid 1px #979797;}
label.bui-checkbox-label input:disabled:checked + .bui-checkbox:after{color: #c1c1c1;}
label.bui-checkbox-label.bui-checkbox-anim .bui-checkbox{-webkit-transition: background-color ease-out .3s; transition: background-color ease-out .3s;}

/* checkbox switch */
label.bui-switch-label input{position: absolute; opacity: 0; visibility: hidden;}
label.bui-switch-label input:checked {border-color: #64bd63;box-shadow: #64bd63 0 0 0 16px inset;background-color: #64bd63; }
label.bui-switch-label input:checked:before {left: 27px; }
label.bui-switch-label input:disabled + .bui-switch {background-color: #e8e8e8;border: solid 1px #dfdfdf; }
label.bui-switch-label input:disabled + .bui-switch:before {
background-color: #c1c1c1; }
label.bui-switch-label input:disabled:checked + .bui-switch {background-color: #e8e8e8;box-shadow: #e8e8e8 0 0 0 16px inset;border: solid 1px #dfdfdf; }label.bui-switch-label input:disabled:checked + .bui-switch:before {background-color: #c1c1c1; }
label.bui-switch-label .bui-switch{display: inline-block; width: 50px; height: 25px; position: relative;border:1px solid #dfdfdf; background-color: #fdfdfd; box-shadow:#dfdfdf 0 0 0 0 inset; border-radius: 20px;-webkit-appearance: none;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;outline: none; background-clip: content-box;}
label.bui-switch-label .bui-switch:before{content: ""; width: 23px; height: 23px; position: absolute; top:1px; left: 1px; border-radius: 20px; background-color: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);}
label.bui-switch-label input:checked + .bui-switch{border-color: #64bd63; box-shadow: #64bd63 0 0 0 16px inset; background-color: #64bd63;}
label.bui-switch-label input:checked + .bui-switch:before{left: 27px; }
label.bui-switch-label.bui-switch-anim{-webkit-transition: border cubic-bezier(0, 0, 0, 1) 0.4s, box-shadow cubic-bezier(0, 0, 0, 1) 0.4s;
  transition: border cubic-bezier(0, 0, 0, 1) 0.4s, box-shadow cubic-bezier(0, 0, 0, 1) 0.4s;}
label.bui-switch-label.bui-switch-anim .bui-switch:before { -webkit-transition: left 0.3s; transition: left 0.3s;}
label.bui-switch-label.bui-switch-anim input:checked + .bui-switch{box-shadow: #64bd63 0 0 0 16px inset;background-color: #64bd63; -webkit-transition: border ease 0.4s, box-shadow ease 0.4s, background-color ease 1.2s;transition: border ease 0.4s, box-shadow ease 0.4s, background-color ease 1.2s; }
label.bui-switch-label.bui-switch-anim input:checked + .bui-switch:before{-webkit-transition: left 0.3s;transition: left 0.3s;}
label.bui-switch-label.bui-switch-animbg{-webkit-transition: background-color ease 0.4s;transition: background-color ease 0.4s; }
label.bui-switch-label.bui-switch-animbg .bui-switch:before{ -webkit-transition: left 0.3s;transition: left 0.3s;}
label.bui-switch-label.bui-switch-animbg input:checked + .bui-switch{box-shadow: #dfdfdf 0 0 0 0 inset; background-color: #64bd63; -webkit-transition: border-color 0.4s, background-color ease 0.4s;transition: border-color 0.4s, background-color ease 0.4s;}
label.bui-switch-label.bui-switch-animbg input:checked + .bui-switch:before{-webkit-transition: left 0.3s;transition: left 0.3s;}