checkbox修改默认样式

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>CSS3漂亮的自定义Checkbox复选框</title><style>
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
</style><style>
/* .slideOne */
.slideOne {width: 50px;height: 10px;background: #333;margin: 20px auto;position: relative;-moz-border-radius: 50px;-webkit-border-radius: 50px;border-radius: 50px;-moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);-webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
}
.slideOne label {display: block;width: 16px;height: 16px;position: absolute;top: -3px;left: -3px;cursor: pointer;background: #fcfff4;background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);-moz-border-radius: 50px;-webkit-border-radius: 50px;border-radius: 50px;-moz-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);-webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);-moz-transition: all 0.4s ease;-o-transition: all 0.4s ease;-webkit-transition: all 0.4s ease;transition: all 0.4s ease;
}
.slideOne input[type=checkbox] {visibility: hidden;
}
.slideOne input[type=checkbox]:checked + label {left: 37px;
}/* end .slideOne */
/* .slideTwo */
.slideTwo {width: 80px;height: 30px;background: #333;margin: 20px auto;position: relative;-moz-border-radius: 50px;-webkit-border-radius: 50px;border-radius: 50px;-moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);-webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
}
.slideTwo:after {content: '';position: absolute;top: 14px;left: 14px;height: 2px;width: 52px;background: #111;-moz-border-radius: 50px;-webkit-border-radius: 50px;border-radius: 50px;-moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);-webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
}
.slideTwo label {display: block;width: 22px;height: 22px;cursor: pointer;position: absolute;top: 4px;z-index: 1;left: 4px;background: #fcfff4;-moz-border-radius: 50px;-webkit-border-radius: 50px;border-radius: 50px;-moz-transition: all 0.4s ease;-o-transition: all 0.4s ease;-webkit-transition: all 0.4s ease;transition: all 0.4s ease;-moz-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);-webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
}
.slideTwo label:after {content: '';width: 10px;height: 10px;position: absolute;top: 6px;left: 6px;background: #333;-moz-border-radius: 50px;-webkit-border-radius: 50px;border-radius: 50px;-moz-box-shadow: inset 0px 1px 1px black, 0px 1px 0px rgba(255, 255, 255, 0.9);-webkit-box-shadow: inset 0px 1px 1px black, 0px 1px 0px rgba(255, 255, 255, 0.9);box-shadow: inset 0px 1px 1px black, 0px 1px 0px rgba(255, 255, 255, 0.9);
}
.slideTwo input[type=checkbox] {visibility: hidden;
}
.slideTwo input[type=checkbox]:checked + label {left: 54px;
}
.slideTwo input[type=checkbox]:checked + label:after {background: #00bf00;
}/* end .slideTwo */
/* .slideThree */
.slideThree {width: 80px;height: 26px;background: #333;margin: 20px auto;position: relative;-moz-border-radius: 50px;-webkit-border-radius: 50px;border-radius: 50px;-moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);-webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
}
.slideThree:after {content: 'OFF';color: #000;position: absolute;right: 10px;z-index: 0;font: 12px/26px Arial, sans-serif;font-weight: bold;text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.15);
}
.slideThree:before {content: 'ON';color: #00bf00;position: absolute;left: 10px;z-index: 0;font: 12px/26px Arial, sans-serif;font-weight: bold;
}
.slideThree label {display: block;width: 34px;height: 20px;cursor: pointer;position: absolute;top: 3px;left: 3px;z-index: 1;background: #fcfff4;background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);-moz-border-radius: 50px;-webkit-border-radius: 50px;border-radius: 50px;-moz-transition: all 0.4s ease;-o-transition: all 0.4s ease;-webkit-transition: all 0.4s ease;transition: all 0.4s ease;-moz-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);-webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
}
.slideThree input[type=checkbox] {visibility: hidden;
}
.slideThree input[type=checkbox]:checked + label {left: 43px;
}/* end .slideThree */
/* .roundedOne */
.roundedOne {width: 28px;height: 28px;position: relative;margin: 20px auto;background: #fcfff4;background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);-moz-border-radius: 50px;-webkit-border-radius: 50px;border-radius: 50px;-moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);-webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
}
.roundedOne label {width: 20px;height: 20px;cursor: pointer;position: absolute;left: 4px;top: 4px;background: -moz-linear-gradient(top, #222222 0%, #45484d 100%);background: -webkit-linear-gradient(top, #222222 0%, #45484d 100%);background: linear-gradient(to bottom, #222222 0%, #45484d 100%);-moz-border-radius: 50px;-webkit-border-radius: 50px;border-radius: 50px;-moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px white;-webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px white;box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px white;
}
.roundedOne label:after {content: '';width: 16px;height: 16px;position: absolute;top: 2px;left: 2px;background: #00bf00;background: -moz-linear-gradient(top, #00bf00 0%, #009400 100%);background: -webkit-linear-gradient(top, #00bf00 0%, #009400 100%);background: linear-gradient(to bottom, #00bf00 0%, #009400 100%);filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);opacity: 0;-moz-border-radius: 50px;-webkit-border-radius: 50px;border-radius: 50px;-moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);-webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
}
.roundedOne label:hover::after {filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);opacity: 0.3;
}
.roundedOne input[type=checkbox] {visibility: hidden;
}
.roundedOne input[type=checkbox]:checked + label:after {filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);opacity: 1;
}/* end .roundedOne */
/* .roundedTwo */
.roundedTwo {width: 28px;height: 28px;position: relative;margin: 20px auto;background: #fcfff4;background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);-moz-border-radius: 50px;-webkit-border-radius: 50px;border-radius: 50px;-moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);-webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
}
.roundedTwo label {width: 20px;height: 20px;position: absolute;top: 4px;left: 4px;cursor: pointer;background: -moz-linear-gradient(top, #222222 0%, #45484d 100%);background: -webkit-linear-gradient(top, #222222 0%, #45484d 100%);background: linear-gradient(to bottom, #222222 0%, #45484d 100%);-moz-border-radius: 50px;-webkit-border-radius: 50px;border-radius: 50px;-moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px white;-webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px white;box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px white;
}
.roundedTwo label:after {content: '';width: 9px;height: 5px;position: absolute;top: 5px;left: 4px;border: 3px solid #fcfff4;border-top: none;border-right: none;background: transparent;filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);opacity: 0;-moz-transform: rotate(-45deg);-ms-transform: rotate(-45deg);-webkit-transform: rotate(-45deg);transform: rotate(-45deg);
}
.roundedTwo label:hover::after {filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);opacity: 0.3;
}
.roundedTwo input[type=checkbox] {visibility: hidden;
}
.roundedTwo input[type=checkbox]:checked + label:after {filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);opacity: 1;
}/* end .roundedTwo */
/* .squaredOne */
.squaredOne {width: 28px;height: 28px;position: relative;margin: 20px auto;background: #fcfff4;background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);-moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);-webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
}
.squaredOne label {width: 20px;height: 20px;position: absolute;top: 4px;left: 4px;cursor: pointer;background: -moz-linear-gradient(top, #222222 0%, #45484d 100%);background: -webkit-linear-gradient(top, #222222 0%, #45484d 100%);background: linear-gradient(to bottom, #222222 0%, #45484d 100%);-moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px white;-webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px white;box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px white;
}
.squaredOne label:after {content: '';width: 16px;height: 16px;position: absolute;top: 2px;left: 2px;background: #00bf00;background: -moz-linear-gradient(top, #00bf00 0%, #009400 100%);background: -webkit-linear-gradient(top, #00bf00 0%, #009400 100%);background: linear-gradient(to bottom, #00bf00 0%, #009400 100%);-moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);-webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);opacity: 0;
}
.squaredOne label:hover::after {filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);opacity: 0.3;
}
.squaredOne input[type=checkbox] {visibility: hidden;
}
.squaredOne input[type=checkbox]:checked + label:after {filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);opacity: 1;
}/* end .squaredOne */
/* .squaredTwo */
.squaredTwo {width: 28px;height: 28px;position: relative;margin: 20px auto;background: #fcfff4;background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);-moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);-webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
}
.squaredTwo label {width: 20px;height: 20px;cursor: pointer;position: absolute;left: 4px;top: 4px;background: -moz-linear-gradient(top, #222222 0%, #45484d 100%);background: -webkit-linear-gradient(top, #222222 0%, #45484d 100%);background: linear-gradient(to bottom, #222222 0%, #45484d 100%);-moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px white;-webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px white;box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px white;
}
.squaredTwo label:after {content: '';width: 9px;height: 5px;position: absolute;top: 4px;left: 4px;border: 3px solid #fcfff4;border-top: none;border-right: none;background: transparent;filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);opacity: 0;-moz-transform: rotate(-45deg);-ms-transform: rotate(-45deg);-webkit-transform: rotate(-45deg);transform: rotate(-45deg);
}
.squaredTwo label:hover::after {filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);opacity: 0.3;
}
.squaredTwo input[type=checkbox] {visibility: hidden;
}
.squaredTwo input[type=checkbox]:checked + label:after {filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);opacity: 1;
}/* end .squaredTwo */
/* .squaredThree */
.squaredThree {width: 20px;position: relative;margin: 20px auto;
}
.squaredThree label {width: 20px;height: 20px;cursor: pointer;position: absolute;top: 0;left: 0;background: -moz-linear-gradient(top, #222222 0%, #45484d 100%);background: -webkit-linear-gradient(top, #222222 0%, #45484d 100%);background: linear-gradient(to bottom, #222222 0%, #45484d 100%);-moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;-moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.4);-webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.4);box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.4);
}
.squaredThree label:after {content: '';width: 9px;height: 5px;position: absolute;top: 4px;left: 4px;border: 3px solid #fcfff4;border-top: none;border-right: none;background: transparent;filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);opacity: 0;-moz-transform: rotate(-45deg);-ms-transform: rotate(-45deg);-webkit-transform: rotate(-45deg);transform: rotate(-45deg);
}
.squaredThree label:hover::after {filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);opacity: 0.3;
}
.squaredThree input[type=checkbox] {visibility: hidden;
}
.squaredThree input[type=checkbox]:checked + label:after {filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);opacity: 1;
}/* end .squaredThree */
/* .squaredFour */
.squaredFour {width: 20px;position: relative;margin: 20px auto;
}
.squaredFour label {width: 20px;height: 20px;cursor: pointer;position: absolute;top: 0;left: 0;background: #fcfff4;background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);-moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;-moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);-webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
}
.squaredFour label:after {content: '';width: 9px;height: 5px;position: absolute;top: 4px;left: 4px;border: 3px solid #333;border-top: none;border-right: none;background: transparent;filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);opacity: 0;-moz-transform: rotate(-45deg);-ms-transform: rotate(-45deg);-webkit-transform: rotate(-45deg);transform: rotate(-45deg);
}
.squaredFour label:hover::after {filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);opacity: 0.5;
}
.squaredFour input[type=checkbox] {visibility: hidden;
}
.squaredFour input[type=checkbox]:checked + label:after {filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);opacity: 1;
}/* end .squaredFour */
* {box-sizing: border-box;
}body {background: #555;background-image: url("http://subtlepatterns.com/patterns/dark_wall.png");font-family: 'Open Sans', sans-serif;font-weight: 300;
}
body h1, body h2 {color: #eee;font-size: 30px;text-align: center;margin: 20px 0 50px 0;-webkit-font-smoothing: antialiased;text-shadow: 0px 1px black;
}
body .ondisplay {text-align: center;border-bottom: 1px solid gray;padding: 20px 0;
}
body .ondisplay section {width: 100px;height: 100px;background: #555;display: inline-block;position: relative;text-align: center;margin-top: 5px;border: 1px solid gray;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
body .ondisplay section:before {content: 'click it';color: #bbb;font-size: 12px;font-weight: 400;-webkit-font-smoothing: antialiased;text-shadow: 0px 1px black;
}
body .ondisplay section:after {content: attr(title);position: absolute;width: 100%;left: 0;bottom: 3px;color: #fff;font-size: 12px;font-weight: 400;-webkit-font-smoothing: antialiased;text-shadow: 0px 1px black;
}
</style>
</head>
<body><h1>CSS3 Checkbox Styles</h1>
<div class="ondisplay"><section title=".slideOne"><!-- .slideOne --><div class="slideOne">  <input type="checkbox" value="None" id="slideOne" name="check" checked /><label for="slideOne"></label></div><!-- end .slideOne --></section><section title=".slideTwo"><!-- .slideTwo --><div class="slideTwo">  <input type="checkbox" value="None" id="slideTwo" name="check" checked /><label for="slideTwo"></label></div><!-- end .slideTwo --></section><section title=".slideThree"><!-- .slideThree --><div class="slideThree">  <input type="checkbox" value="None" id="slideThree" name="check" checked /><label for="slideThree"></label></div><!-- end .slideThree --></section><section title=".roundedOne"><!-- .roundedOne --><div class="roundedOne"><input type="checkbox" value="None" id="roundedOne" name="check" checked /><label for="roundedOne"></label></div><!-- end .roundedOne --></section><section title=".roundedTwo"><!-- .roundedTwo --><div class="roundedTwo"><input type="checkbox" value="None" id="roundedTwo" name="check" checked /><label for="roundedTwo"></label></div><!-- end .roundedTwo --></section><section title=".squaredOne"><!-- .squaredOne --><div class="squaredOne"><input type="checkbox" value="None" id="squaredOne" name="check" checked /><label for="squaredOne"></label></div><!-- end .squaredOne --></section><section title=".squaredTwo"><!-- .squaredTwo --><div class="squaredTwo"><input type="checkbox" value="None" id="squaredTwo" name="check" checked /><label for="squaredTwo"></label></div><!-- end .squaredTwo --></section><section title=".squaredThree"><!-- .squaredThree --><div class="squaredThree"><input type="checkbox" value="None" id="squaredThree" name="check" checked /><label for="squaredThree"></label></div><!-- end .squaredThree --></section><section title=".squaredFour"><!-- .squaredFour --><div class="squaredFour"><input type="checkbox" value="None" id="squaredFour" name="check" checked /><label for="squaredFour"></label></div><!-- end .squaredFour --></section></div><div style="text-align:center;clear:both"></div>
</body></html>

checkbox修改默认样式相关推荐

[css] 如何修改美化radio、checkbox的默认样式？
[css] 如何修改美化radio.checkbox的默认样式? 利用after伪元素自定义radio或者checkbox 或是利用图片进行样式修改个人简介我是歌谣,欢迎和大家一起交流前后端知识. ...
更改checkbox的默认样式
更改checkbox的默认样式原理: label 绑定 checkbox, 可以通过点击该label来触发该 checkbox,通过 labe l的 :after 或 :before伪类来修改样式 ...
Vue 内嵌微信登录二维码及修改默认样式
1. index.html 引入微信官方提供的js文件 <script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/w ...
Naive UI修改默认样式
一.问题描述因为大创的缘故,需要做出一个网站,在搭建网站的过程中需要使用Naive UI框架,在设置样式的时候一直无法修改默认样式.小白不知道应该如何使用样式穿透,同时和Naive UI相关的博客比 ...
(Select)解决：Element-ui 中的 Select 组件用(深度)选择器修改默认样式不生效的问题及如何使用 popper-append-to-body=“false“ 属性
1.存在修改默认样式不生效问题的展示: A.问题一:虽然通过深度选择器修改了下拉框的背景等样式问题却没有展示: B.问题二:渲染后的 dom 元素并不在 #app 元素内部: // 发现:修改下拉框默 ...
小程序修改checkbox的默认样式和图标多选
小程序修改checkbox的默认样式和图标多选话不多说上代码 <checkbox-group bindchange="checkboxChange" data-item=& ...
element ui需要引入样式吗_ElementUI 修改默认样式的几种办法
ElementUI 是一套ui组件库,目前最新版本 react 和 vue 等主流框架都有支持.该库默认主题色是天蓝色,若用于项目开发,难免遇到要需求修改其默认样式的情况,本文就基于 react 和 ...
「后端小伙伴来学前端了」Element修改默认样式 | 记录自己学习前端踩坑日记
一.Element修改下拉框角标就比如我最近遇上的一个问题,想要重定义 element 组件库中的下拉选择框的角标,一直不知道怎么覆盖才好. 最后才知道是由伪元素做的. 如果我们想要重定义eleme ...
element-ui 通过变量修改默认样式
项目用的是 element-ui + vue 项目里有个需求是要修改 element 消息提示组件中 warning 类型的背景色和那个小感叹号的背景色有两种方式,第一种比较简单,用 F12 找到想 ...

checkbox修改默认样式

checkbox修改默认样式相关推荐

最新文章

热门文章