Html
    Css
    Js

    
                        
* {
	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;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

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

用css3美化单选框 radio 、多选框 checkbox 和 switch开关按钮,有简单的动画、无动画、禁用状态三种状态

0