藤藤每日一练——Pure CSS3 Checkbox

这个案例是使用了ＣＳＳ３制作了六种不同风格的checkbox效果。表单的checkbox自定义效果，在webkit内核下，我们可以随心所意的进行自定义样式的美化，但在其他浏览器下还是有些麻烦，早期使用jQuery插件或者别的JavaScript脚本代码来实现，今天的ＣＳＳ３属性能让你解决这个难题。当然你要知道制作的思路，不然还是有难度的。在整个效果中，最关键的是标签的配合以及":before"和“:after”等ＣＳＳ３选择器的应用，特别声明一下，由于input的伪类选择器在部分浏览器下还不支持，所以需要添加一些标签来辅助实现":before"这样的伪类选择器的效果，详细的请看藤藤是怎么制作的吧。

demodownload

HTML CODE

<div class="black_form">
  <form action="">
    <div class="clearfix">
      <span class="check">
        <input type="checkbox" id="check" name="check" class="check" checked="checked" />
        <label for="check" data-off="OFF" data-on="ON"><em></em></label>
      </span> 
    </div>
    <div class="clearfix">
      <span class="rec_swith">
        <input type="checkbox" id="rec_swith" name="rec_swith" class="rec_swith" checked="checked" />
        <label for="rec_swith"></label>
      </span>
    </div>
    <div class="clearfix">
      <span class="round_swith">
        <input type="checkbox" id="round_swith" name="round_swith" class="round_swith" checked="checked" />
        <label for="round_swith"></label>
      </span>
    </div>
    <div class="clearfix">
      <span class="rocker_swith">
        <input type="checkbox" id="rocker_swith" name="rocker_swith" class="rocker_swith" checked="checked" />
        <label for="rocker_swith"><em></em></label>
      </span>	
    </div>
  </form>
</div><!--/black_form-->
<div class="white_form">
  <form action="">
    <div class="clearfix">
      <span class="wheels_check">
        <input type="checkbox" id="wheels_check" name="wheels_check" class="wheels_check" checked="checked" />
        <label for="wheels_check" data-off="OFF" data-on="ON"><em></em></label>
      </span> 
    </div>
    <div class="clearfix">
      <span class="wheels_check inner_check">
        <input type="checkbox" id="inner_check" name="inner_check" class="inner_check" checked="checked" />
        <label for="inner_check" data-off="OFF" data-on="ON"><em></em></label>
      </span> 
    </div>
    <div class="clearfix">
      <span class="wheels_check rectangle_check">
        <input type="checkbox" id="rectangle_check" name="rectangle_check" class="rectangle_check" checked="checked" />
        <label for="rectangle_check" data-off="OFF" data-on="ON"><em></em></label>
      </span> 
    </div>
    <div class="clearfix">
      <span class="wheels_check rectangle_inner_check">
        <input type="checkbox" id="rectangle_inner_check" name="rectangle_inner_check" class="rectangle_inner_check" checked="checked" />
        <label for="rectangle_inner_check" data-off="OFF" data-on="ON"><em></em></label>
      </span> 
    </div>
  </form>
</div><!--/white_form-->

CSS CODE

body {
　background-color: #272425;
}	
.demo {
　margin: 40px auto 0;
　width: 100px;
}	
.demo div {
　margin-top: 60px;	
}
.demo .white_form {
　margin-top: 120px;
}
.demo div span {
　position: relative;
　display: block;
}
.demo div span label ,
input[type="checkbox"] + label em {
　position: absolute;
　display: block;
　cursor: pointer;
}
input[type="checkbox"] {
　position: absolute;
　display: block;
　width: 100%;
　height: 100%;
　top: 0;
　left: 0;
　margin:0;
　cursor: pointer;
}
input[type="checkbox"] + label:after,
input[type="checkbox"] + label:before {
　position: absolute;
  display: block;
  content: "";
}
span.check input[type="checkbox"] + label em {
  top: -2px;
  width: 24px;
  height: 24px;
  border-radius: 24px;
  box-shadow: 0 1px 2px #97999b inset,0 3px 3px #0f0f0f;
  background-image: -webkit-linear-gradient(top,#424549,#1c1e20);
  background-image: -moz-linear-gradient(top,#424549,#1c1e20);
  background-image: -ms-linear-gradient(top,#424549,#1c1e20);
  background-image: -o-linear-gradient(top,#424549,#1c1e20);
  background-image: linear-gradient(top,#424549,#1c1e20);   
　margin-left:37px;
　z-index: 2;
　-webkit-transition: .85s;
  -moz-transition: .85s;
  -ms-transition: .85s;
　-o-transition: .85s;
　transition: .85s;
}
span.check input[type=checkbox]:checked + label em {
　margin-left:0;
}
span.check input[type="checkbox"] + label {
　width: 60px;
　height: 22px;
　border-radius: 11px;
　box-shadow: 0 0 5px rgba(0,0,0,.8) inset,
　　　　　　　　0 0 12px rgba(0,0,0,.9) inset,
　　　　　　　　3px 4px 4px rgba(255,255,255,.055),
　　　　　　　　-3px 4px 4px rgba(255,255,255,.055),
　　　　　　　　-4px 3px 4px rgba(255,255,255,.055),
　　　　　　　　4px 3px 4px rgba(255,255,255,.055),
　　　　　　　　0 5px 0 rgba(255,255,255,.045),
　　　　　　　　0 0 0 5px #0e0e0e;
　background-image: -webkit-linear-gradient(left, rgba(0,0,0,.1),rgba(0,0,0,.1)),-webkit-linear-gradient(left, #2e9c0c 50%, #e71300 50%);
　background-image: -moz-linear-gradient(left, rgba(0,0,0,.1),rgba(0,0,0,.1)),-moz-linear-gradient(left, #2e9c0c 50%, #e71300 50%);
　background-image: -ms-linear-gradient(left, rgba(0,0,0,.1),rgba(0,0,0,.1)),-ms-linear-gradient(left, #2e9c0c 50%, #e71300 50%);
　background-image: -o-linear-gradient(left, rgba(0,0,0,.1),rgba(0,0,0,.1)),-o-linear-gradient(left, #2e9c0c 50%, #e71300 50%);
　background-image: linear-gradient(left, rgba(0,0,0,.1),rgba(0,0,0,.1)),linear-gradient(left, #2e9c0c 50%, #e71300 50%);					
　background-size: 100% 100%, 200% 100%;
  background-position: 0 0, 60px 0;
  -webkit-transition: .85s;
  -moz-transition: .85s;
  -ms-transition: .85s;
  -o-transition: .85s;
  transition: .85s;
}					
span.check input[type="checkbox"]:checked + label{
　background-position: 0 0, 0 0;
}
span.check input[type="checkbox"] + label:after {
　content: attr(data-off);
　top:0;
　left: 0;
　color: #590000;
　font-size: 12px;
　font-weight: bold;
　text-shadow: 0 1px 0 #d44949;
　width: 24px;
  height: 24px;
　line-height: 22px;
　padding-left: 7px;
}
span.check input[type="checkbox"]:checked + label:after {
　content: attr(data-on);
　color: #0c1c00;
　text-shadow: 0 1px 0 #60ad32;
　padding-left: 33px;
}

span.rec_swith {
　width: 80px;
　height: 22px;
　border-radius: 15px;
　border: 2px solid #101010;
　box-shadow: 0 0 0 5px #1a1a1a,-1px -1px 0 #111111,1px 1px 0 #2e2c2d;
　background-image: -webkit-linear-gradient(top,#1d1d1d,#747474 48%,#1d1d1d);
　background-image: -moz-linear-gradient(top,#1d1d1d,#747474 48%,#1d1d1d);
　background-image: -ms-linear-gradient(top,#1d1d1d,#747474 48%,#1d1d1d);
　background-image: -o-linear-gradient(top,#1d1d1d,#747474 48%,#1d1d1d);
　background-image: linear-gradient(top,#1d1d1d,#747474 48%,#1d1d1d);
}
span.rec_swith input[type="checkbox"] + label {
　top: 0;
　left: -1px;
  width: 64px;
  height: 22px;
  color: #575757;
  text-shadow:-1px -1px 0 #7a7a7a,1px 1px 0 #7a7a7a;
  text-align: right;
  border-radius: 11px;
  border-left: 1px solid #414141;
  border-right: 2px solid #b9b9b9;
  background-image: -webkit-linear-gradient(left,#393939,#939393);
  background-image: -moz-linear-gradient(left,#393939,#939393);
  background-image: -ms-linear-gradient(left,#393939,#939393);
  background-image: -o-linear-gradient(left,#393939,#939393);
  background-image: linear-gradient(left,#393939,#939393);
  -webkit-transition: left .05s ease-in-out;
  -moz-transition: left .05s ease-in-out;
  -ms-transition: left .05s ease-in-out;
  -o-transition: left .05s ease-in-out;
　transition: left .05s ease-in-out;
}
span.rec_swith input[type="checkbox"] + label:after {
　top: 8px;
　right: 5px;
  width: 10px;
  height: 3px;
  border-radius: 3px;
  border: 1px solid #575757;
  box-shadow: 0 0 1px 1px #767676;
  background-color: #878787;
}
span.rec_swith input[type="checkbox"]:checked + label {
　left: 10px;
}
span.rec_swith input[type="checkbox"]:checked + label:after {
  border: 1px solid #264104;
  box-shadow: 0 0 1px 1px #afba90;
  background-color: #008c01;
}

span.round_swith {
　width: 50px;
　height: 50px;
　border-radius: 25px;
　border: 1px solid #636363;
　box-shadow: 0 5px 8px rgba(0,0,0,.26),	0 0 0 5px #ebebeb,0 0 2px 7px rgba(0,0,0,.23),0 6px 9px rgba(0,0,0,1);
　background-image: -webkit-linear-gradient(left,#767676,#eaeaea 48%,#767676);
　background-image: -moz-linear-gradient(left,#767676,#eaeaea 48%,#767676);
　background-image: -ms-linear-gradient(left,#767676,#eaeaea 48%,#767676);
　background-image: -o-linear-gradient(left,#767676,#eaeaea 48%,#767676);
　background-image: linear-gradient(left,#767676,#eaeaea 48%,#767676);
}
span.round_swith input[type="checkbox"] + label {
　top:1px;
　left: 0;
　width: 50px;
　height: 44px;
　border-radius: 22px;
　background-image:-webkit-linear-gradient(top,#a5a5a5,#ebebeb);
　background-image:-moz-linear-gradient(top,#a5a5a5,#ebebeb);
　background-image:-ms-linear-gradient(top,#a5a5a5,#ebebeb);
　background-image:-o-linear-gradient(top,#a5a5a5,#ebebeb);
　background-image:linear-gradient(top,#a5a5a5,#ebebeb);
　-webkit-transition: top .05s ease-in-out;
  -moz-transition: top .05s ease-in-out;
　-ms-transition: top .05s ease-in-out;
　-o-transition: top .05s ease-in-out;
　transition: top .05s ease-in-out;
}
span.round_swith input[type="checkbox"] + label:after {
　bottom: 2px;
　left: 20px;
　width: 10px;
　height: 8px;
　border-radius: 4px;
　border: 1px solid #470100;
　box-shadow: 0 -1px 3px rgba(0,0,0,.9) inset;
　background-image: -webkit-linear-gradient(top,#cd0000,#ff1a00);
　background-image: -moz-linear-gradient(top,#cd0000,#ff1a00);
　background-image: -ms-linear-gradient(top,#cd0000,#ff1a00);
　background-image: -o-linear-gradient(top,#cd0000,#ff1a00);
　background-image: linear-gradient(top,#cd0000,#ff1a00);
}
span.round_swith input[type="checkbox"]:checked + label {
　top:6px;
}
span.round_swith input[type="checkbox"]:checked + label:after {
　border:1px solid #1e4a07;
　box-shadow: 0 -1px 3px rgba(0,0,0,.9) inset;
　background-image: -webkit-linear-gradient(top,#8ac000,#91cb00);
　background-image: -moz-linear-gradient(top,#8ac000,#91cb00);
　background-image: -ms-linear-gradient(top,#8ac000,#91cb00);
　background-image: -o-linear-gradient(top,#8ac000,#91cb00);
　background-image: linear-gradient(top,#8ac000,#91cb00);
}

span.rocker_swith input[type="checkbox"] + label {
　width: 60px;
　height: 26px;
　text-align: center;
　border-radius: 13px;	
　box-shadow: 0 1px 1px rgba(0,0,0,.4) inset,
　　　　　　　　0 -2px 3px rgba(0,0,0,.6) inset,
　　　　　　　　3px 4px 4px rgba(255,255,255,.055), 
　　　　　　　　-3px 4px 4px rgba(255,255,255,.055), 
　　　　　　　　-4px 3px 4px rgba(255,255,255,.055), 
　　　　　　　　4px 3px 4px rgba(255,255,255,.055), 
　　　　　　　　0 5px 0 rgba(255,255,255,.045), 
　　　　　　　　0 0 0 5px #0e0e0e;
　background-image: -webkit-linear-gradient(top,#505050,#1d1d1d);
　background-image: -moz-linear-gradient(top,#505050,#1d1d1d);
　background-image: -ms-linear-gradient(top,#505050,#1d1d1d);
　background-image: -o-linear-gradient(top,#505050,#1d1d1d);
　background-image: linear-gradient(top,#505050,#1d1d1d);
}
span.rocker_swith input[type="checkbox"] + label:before,
span.rocker_swith input[type="checkbox"] + label:after {
　top: 8px;
　width: 10px;
　height: 10px;
　border-radius: 5px;
　border: 1px solid #121112;
　background: -webkit-radial-gradient(#494949,#0f0f0e);
　background: -moz-radial-gradient(#494949,#0f0f0e);
　background: -ms-radial-gradient(#494949,#0f0f0e);
　background: -o-radial-gradient(#494949,#0f0f0e);
　background: radial-gradient(#494949,#0f0f0e);
}
span.rocker_swith input[type="checkbox"] + label:before {
　left: -30px;
　border: 1px solid #380801;
　box-shadow: 0 0 9px #ff7059;
　background: -webkit-radial-gradient(#ec3d02,#8a040e);
　background: -moz-radial-gradient(#ec3d02,#8a040e);
　background: -ms-radial-gradient(#ec3d02,#8a040e);
　background: -o-radial-gradient(#ec3d02,#8a040e);
　background: radial-gradient(#ec3d02,#8a040e);
}
span.rocker_swith input[type="checkbox"] + label:after {
　right: -30px;
}

span.rocker_swith input[type="checkbox"]:checked + label:before {
　box-shadow: none;
　border-radius: 5px;
　border: 1px solid #121112;
　background: -webkit-radial-gradient(#494949,#0f0f0e);
　background: -moz-radial-gradient(#494949,#0f0f0e);
　background: -ms-radial-gradient(#494949,#0f0f0e);
　background: -o-radial-gradient(#494949,#0f0f0e);
　background: radial-gradient(#494949,#0f0f0e);
}
span.rocker_swith input[type="checkbox"]:checked + label:after {
　right: -30px;
　border: 1px solid #1c3600;
　box-shadow: 0 0 9px #abff59;
　background: -webkit-radial-gradient(#c9ff30,#488704);
　background: -moz-radial-gradient(#c9ff30,#488704);
　background: -ms-radial-gradient(#c9ff30,#488704);
　background: -o-radial-gradient(#c9ff30,#488704);
　background: radial-gradient(#c9ff30,#488704);
}
input[type="checkbox"][class="rocker_swith"] + label em {
　position: relative;
　display: inline-block;
　width: 18px;
　height: 18px;
　margin-top: 4px;
　border-radius: 9px;
　box-shadow: 0 1px 0 #3e3e3e,0 -1px 0 #101010;
　background: #292b2e;
}
input[type="checkbox"][class="rocker_swith"] + label em:after,
input[type="checkbox"][class="rocker_swith"] + label em:before {
　position: absolute;
　display: inline-block;
　content: "";
}
input[type="checkbox"][class="rocker_swith"] + label em:before {
　top: -3px;
　left: -20px;
　width: 34px;
　height: 24px;
　border-radius:5px 300px 300px 0 / 0 100px 100px 0;
　background: -webkit-linear-gradient(top,#060606,#2b2a2a 20%,#6b6868 50%,#2b2a2a 80%,#060606);
　background: -moz-linear-gradient(top,#060606,#2b2a2a 20%,#6b6868 50%,#2b2a2a 80%,#060606);
　background: -ms-linear-gradient(top,#060606,#2b2a2a 20%,#6b6868 50%,#2b2a2a 80%,#060606);
　background: -o-linear-gradient(top,#060606,#2b2a2a 20%,#6b6868 50%,#2b2a2a 80%,#060606);
　background: linear-gradient(top,#060606,#2b2a2a 20%,#6b6868 50%,#2b2a2a 80%,#060606);
}
input[type="checkbox"][class="rocker_swith"] + label em:after {
　top: -2px;
　left: -30px;
　width: 24px;
　height: 24px;
　border-radius: 12px;
　box-shadow: 0 -1px 0 #6b6b6b,0 1px 2px #000;
　background: -webkit-linear-gradient(left,#484c4f,#757778);
　background: -moz-linear-gradient(left,#484c4f,#757778);
　background: -ms-linear-gradient(left,#484c4f,#757778);
　background: -o-linear-gradient(left,#484c4f,#757778);
　background: linear-gradient(left,#484c4f,#757778);
}

input[type="checkbox"][class="rocker_swith"]:checked + label em {
　-webkit-transform:rotate(180deg);
　-moz-transform:rotate(180deg);
　-ms-transform:rotate(180deg);
　-o-transform:rotate(180deg);
　transform:rotate(180deg);
}
span.wheels_check input[type="checkbox"] + label {
　width: 60px;
　height: 22px;
　border-radius:11px;
　border:1px solid #922010;
　box-shadow: 0 1px 5px #922010 inset;
　background-image: -webkit-linear-gradient(left, rgba(0,0,0,.1),rgba(0,0,0,.1)),-webkit-linear-gradient(left, #7ce292 50%, #da8d83 50%);
　background-image: -moz-linear-gradient(left, rgba(0,0,0,.1),rgba(0,0,0,.1)),-moz-linear-gradient(left, #7ce292 50%, #da8d83 50%);	
　background-image: -ms-linear-gradient(left, rgba(0,0,0,.1),rgba(0,0,0,.1)),-ms-linear-gradient(left, #7ce292 50%, #da8d83 50%);
　background-image: -o-linear-gradient(left, rgba(0,0,0,.1),rgba(0,0,0,.1)),-o-linear-gradient(left, #7ce292 50%, #da8d83 50%);
　background-image: linear-gradient(left, rgba(0,0,0,.1),rgba(0,0,0,.1)),	linear-gradient(left, #7ce292 50%, #da8d83 50%);					
　background-size: 100% 100%, 200% 100%;
  background-position: 0 0, 60px 0;
  -webkit-transition: .85s;
  -moz-transition: .85s;
  -ms-transition: .85s;
  -o-transition: .85s;
  transition: .85s;
}
span.wheels_check input[type="checkbox"]:checked + label {
　border:1px solid #055917;
　box-shadow: 0 1px 5px #055917 inset;
　background-position: 0 0, 0 0;
}
span.wheels_check input[type="checkbox"] + label em {
　width: 24px;
　height: 24px;
　top:-1px;
　z-index: 2;
　border-radius: 12px;
　box-shadow: -1px 0 0 #b6786f,1px 0 0 #999;
　background:  -webkit-linear-gradient(25deg, #fff 55%, rgba(140,140,140,.85)),
　　-webkit-linear-gradient(-50deg, rgba(140,140,140,.85) ,#fff 50%,rgba(140,140,140,.85) ),
　　-webkit-linear-gradient(50deg, #fff 35%, rgba(140,140,140,.85) 85%),
　　-webkit-linear-gradient(-25deg,#fff 55%,rgba(140,140,140,.35) 65% , #fff 75%),
　　-webkit-radial-gradient(#fff,#f8f8f8);
　background:  -moz-linear-gradient(25deg, #fff 55%, rgba(140,140,140,.85)),
　　-moz-linear-gradient(-50deg, rgba(140,140,140,.85) ,#fff 50%,rgba(140,140,140,.85) ),
　　-moz-linear-gradient(50deg, #fff 35%, rgba(140,140,140,.85) 85%),
　　-moz-linear-gradient(-25deg,#fff 55%,rgba(140,140,140,.35) 65% , #fff 75%),
　　-moz-radial-gradient(#fff,#f8f8f8);					
　background:  -ms-linear-gradient(25deg, #fff 55%, rgba(140,140,140,.85)),
　　-ms-linear-gradient(-50deg, rgba(140,140,140,.85) ,#fff 50%,rgba(140,140,140,.85) ),
　　-ms-linear-gradient(50deg, #fff 35%, rgba(140,140,140,.85) 85%),
　　-ms-linear-gradient(-25deg,#fff 55%,rgba(140,140,140,.35) 65% , #fff 75%),
　　-ms-radial-gradient(#fff,#f8f8f8);						
　background:  -o-linear-gradient(25deg, #fff 55%, rgba(140,140,140,.85)),
　　-o-linear-gradient(-50deg, rgba(140,140,140,.85) ,#fff 50%,rgba(140,140,140,.85) ),
　　-o-linear-gradient(50deg, #fff 35%, rgba(140,140,140,.85) 85%),
　　-o-linear-gradient(-25deg,#fff 55%,rgba(140,140,140,.35) 65% , #fff 75%),
　　-o-radial-gradient(#fff,#f8f8f8);					
　background:  linear-gradient(25deg, #fff 55%, rgba(140,140,140,.85)),
　　linear-gradient(-50deg, rgba(140,140,140,.85) ,#fff 50%,rgba(140,140,140,.85) ),
　　linear-gradient(50deg, #fff 35%, rgba(140,140,140,.85) 85%),
　　linear-gradient(-25deg,#fff 55%,rgba(140,140,140,.35) 65% , #fff 75%),
　　radial-gradient(#fff,#f8f8f8);					
　background-size: 12px 12px,12px 17px,12px 8px,12px 12px,100% 100%; 
　background-position: 0 0,-1px 7px,12px 12px,9px 0, 0 0;
　background-repeat: no-repeat;
　-webkit-transform: rotate(180deg) translateX(-38px);
　-moz-transform: rotate(180deg) translateX(-38px);
　-ms-transform: rotate(180deg) translateX(-38px);
　-o-transform: rotate(180deg) translateX(-38px);
　transform: rotate(180deg) translateX(-38px);
　-webkit-transition: .85s;
  -moz-transition: .85s;
  -ms-transition: .85s;
  -o-transition: .85s;
  transition: .85s;
}
span.wheels_check input[type="checkbox"]:checked + label em {
　-webkit-transform:translateX(0);
  -moz-transform:translateX(0);
　-ms-transform:translateX(0);
　-o-transform:translateX(0);
　transform:translateX(0);
　box-shadow: -1px 0 0 #999,1px 0 0 #1d7f32;	
}
span.inner_check input[type="checkbox"] + label em {
　width: 20px;
　height: 20px;
　top: 1px;
　-webkit-transform: rotate(180deg) translateX(-39px);
　-moz-transform: rotate(180deg) translateX(-39px);
　-ms-transform: rotate(180deg) translateX(-39px);
　-o-transform: rotate(180deg) translateX(-39px);
　transform: rotate(180deg) translateX(-39px);
　-webkit-transition: .75s;
  -moz-transition: .75s;
  -ms-transition: .75s;
  -o-transition: .75s;
  transition: .75s;
}
span.inner_check input[type="checkbox"]:checked + label em {
　-webkit-transform:translateX(2px);
  -moz-transform:translateX(2px);
　-ms-transform:translateX(2px);
　-o-transform:translateX(2px);
　transform:translateX(2px);
}
span.rectangle_check input[type="checkbox"] + label,
span.rectangle_inner_check input[type="checkbox"] + label {
　width: 76px;
　height: 24px;
　border-radius: 3px;
}
.white_form span.rectangle_check input[type="checkbox"] + label em {
　width: 38px;
　height: 24px;
　top:-2px;
　left: -2px;
　border-radius: 3px;
　border:1px solid #e4e4e4;
　background-image: -webkit-linear-gradient(top,#fff,#c7c5c5);
　background-image: -moz-linear-gradient(top,#fff,#c7c5c5);
　background-image: -ms-linear-gradient(top,#fff,#c7c5c5);
　background-image: -o-linear-gradient(top,#fff,#c7c5c5);
　background-image: linear-gradient(top,#fff,#c7c5c5);
　background-size: 100%,100%;
　-webkit-transform:translateX(40px);
　-moz-transform:translateX(40px);
　-ms-transform:translateX(40px);
　-o-transform:translateX(40px);
　transform:translateX(40px);
}
.white_form span.rectangle_check input[type="checkbox"]:checked + label em,
.white_form span.rectangle_inner_check input[type="checkbox"]:checked + label em {
　-webkit-transform:translateX(0);
  -moz-transform:translateX(0);
　-ms-transform:translateX(0);
　-o-transform:translateX(0);
　transform:translateX(0);
}
.white_form span.rectangle_inner_check input[type="checkbox"] + label em {
　width: 38px;
　height: 20px;
　top:1px;
　left: 1px;
　border-radius: 3px;
　border:1px solid #e4e4e4;
　background-image: -webkit-linear-gradient(top,#fff,#c7c5c5);
　background-image: -moz-linear-gradient(top,#fff,#c7c5c5);
　background-image: -ms-linear-gradient(top,#fff,#c7c5c5);
　background-image: -o-linear-gradient(top,#fff,#c7c5c5);
　background-image: linear-gradient(top,#fff,#c7c5c5);
　background-size: 100%,100%;
　-webkit-transform:translateX(34px);
  -moz-transform:translateX(34px);
　-ms-transform:translateX(34px);
　-o-transform:translateX(34px);
　transform:translateX(34px);
}
.white_form input[type="checkbox"] + label:after {
　content: attr(data-off);
　top:0;
　left: 0;
　color: #a54234;
　font-size: 12px;
　font-weight: bold;
　text-shadow: 0 1px 0 #eebab3;
　width: 24px;
  height: 24px;
　line-height: 24px;
　padding-left: 7px;
}
.white_form input[type="checkbox"]:checked + label:after {
　content: attr(data-on);
　color: #0b8425;
　text-shadow: 0 1px 0 #fff;
　padding-left: 33px;
}
.white_form  .rectangle_check input[type="checkbox"]:checked + label:after,
.white_form  .rectangle_inner_check input[type="checkbox"]:checked + label:after {
　padding-left: 53px;
}

demodownload

如需转载，烦请注明出处：https://www.fedev.cn/demo/pure-css3-checkbox.html

Women's Singlets - Stussy, ?tzi, Champion, Nike, Adidas & More!