css中的多选radio按钮,CSS3美化单选框 radio 、多选框 checkbox 和 switch开关按钮(原创)...

Html

Css

Js

有简单的背景动画：

男

女

无动画：

男

女

禁用状态(disabled)：

不男不女

不男不女

有简单的背景动画：

男

女

无动画：

男

女

禁用状态(disabled)：

不男不女

不男不女

简单的过渡动画：

简单的背景动画：

无动画：

禁用状态(disabled)：

不男不女

不男不女

* {

margin:0;

padding:0;

}

body {

padding:20px;

}

p {

height:5px;

}

/* 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:#FFFFFF;

border:1px solid #979797;

border-radius:50%;

vertical-align:-2px;

}

label.bui-radios-label input:checked + .bui-radios:after {

position:absolute;

content:"";

width:7px;

height:7px;

background-color:#fff;

border-radius:50%;

top:3px;

left:3px;

}

label.bui-radios-label input:checked + .bui-radios {

background:#00B066;

border:1px solid #00B066;

}

label.bui-radios-label input:disabled + .bui-radios {

background-color:#e8e8e8;

border:solid 1px #979797;

}

label.bui-radios-label input:disabled:checked + .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:#FFFFFF;

border:1px solid #979797;

border-radius:2px;

vertical-align:-2px;

}

label.bui-checkbox-label input:checked + .bui-checkbox:after {

color:#FFFFFF;

font-family:iconfont;

content:"√";

width:13px;

height:13px;

font-size:13px;

line-height:13px;

position:absolute;

top:1px;

left:0;

}

label.bui-checkbox-label input:checked + .bui-checkbox {

background:#00B066;

border:1px solid #00B066;

}

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;

}

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 {

width:50px;

height:25px;

position:relative;

border:1px solid #dfdfdf;

background-color:#fdfdfd;

box-shadow:#dfdfdf 0 0 0 0 inset;

border-radius:20px;

border-top-left-radius:20px;

border-top-right-radius:20px;

border-bottom-left-radius:20px;

border-bottom-right-radius:20px;

background-clip:content-box;

display:inline-block;

-webkit-appearance:none;

-webkit-user-select:none;

-moz-user-select:none;

-ms-user-select:none;

user-select:none;

outline:none;

}

label.bui-switch-label .bui-switch:before {

content:'';

width:23px;

height:23px;

position:absolute;

top:1px;

left:1px;

border-radius:20px;

border-top-left-radius:20px;

border-top-right-radius:20px;

border-bottom-left-radius:20px;

border-bottom-right-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;

}