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
                  短信接口
                快3倍投资金计划