在原来有一篇文章写到了《CSS效果篇--纯CSS+HTML实现checkbox的思路与实例》。

今天这篇文章主要写各种自定义的checkbox复选框，实现如图所示的复选框：

大致的html代码都如下所示：

<div class="ondisplay">

  <section title=".slideOne">

    <div class="slideOne">

      <input type="checkbox" value="None" id="slideOne" name="check" checked />

      <label for="slideOne"></label>

    </div>

  </section>

</div>

那么对应的css代码：

body {

  background: #555;

  font-family: 'Open Sans', sans-serif;

  font-weight:;

}

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:;

  -webkit-font-smoothing: antialiased;

  text-shadow: 0px 1px black;

}

body .ondisplay section:after {

  content: attr(title);

  position: absolute;

  width: 100%;

  left:;

  bottom: 3px;

  color: #fff;

  font-size: 12px;

  font-weight:;

  -webkit-font-smoothing: antialiased;

  text-shadow: 0px 1px black;

}

第一种实现如图所示：

html代码：

<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>

css代码：

/* .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;

}

第二种实现如图所示：

html代码：

<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>

css代码：

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

  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 */

第三种实现如图所示：

html代码：

<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>

css代码：

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

  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:;

  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:;

  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 */

第四种实现如图所示：

html代码：

<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>

css代码：

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

  -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:;

}

/* end .roundedOne */

第五种实现如图所示：

html代码：

<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>

css代码：

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

  -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:;

}

/* end .roundedTwo */

第六种实现如图所示：

html代码：

<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>

css代码：

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

}

.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:;

}

/* end .squaredOne */

第七种实现如图所示：

html代码：

<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>

css代码：

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

  -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:;

}

/* end .squaredTwo */

第八种实现如图所示：

html代码：

<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>

css代码：

/* .squaredThree */

.squaredThree {

  width: 20px;

  position: relative;

  margin: 20px auto;

}

.squaredThree label {

  width: 20px;

  height: 20px;

  cursor: pointer;

  position: absolute;

  top:;

  left:;

  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:;

  -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:;

}

/* end .squaredThree */

第九种实现如图所示：

html代码：

<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>

css代码：

/* .squaredFour */

.squaredFour {

  width: 20px;

  position: relative;

  margin: 20px auto;

}

.squaredFour label {

  width: 20px;

  height: 20px;

  cursor: pointer;

  position: absolute;

  top:;

  left:;

  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:;

  -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:;

}

/* end .squaredFour */

总结，所有自定义checkbox代码如下：

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0, user-scalable=no"/>

<meta charset="utf-8">

<title></title>

<meta name="keywords" content="" />

<meta name="description" content="" />

 <style>

body {

  background: #555;

  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;

}

/* .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;

}

</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>

</body>

</html>


CSS效果：这里有你想要的CSS3漂亮的自定义Checkbox各种复选框的更多相关文章

  1. CSS效果篇--这里有你想要的CSS3漂亮的自定义Checkbox各种复选框

    在原来有一篇文章写到了<CSS效果篇--纯CSS+HTML实现checkbox的思路与实例>.这篇文章主要写各种自定义的checkbox复选框,实现如图所示的复选框: 大致的html代码都 ...

  2. checkbox设置复选框的只读效果不让用户勾选

    在Web开发中,有时候需要显示一些复选框(checkbox),表明这个地方是可以进行勾选操作的,但是有时候是只想告知用户"这个地方是可以进行勾选操作的"而不想让用户在此处勾选(比如 ...

  3. 使用CSS3制作酷炫防苹果复选框 自行测试！

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 使用css3美化复选框

    声明:文章为转载(略改动),点击查看原文.如有侵权24小时内删除,联系QQ:1522025433. 我们知道HTML默认的复选框样式十分简陋,而以图片代替复选框的美化方式会给页面表单的处理带来麻烦,那 ...

  5. 8个非常个性化的CSS3单/复选框

    单选框和复选框在网页表单中应用十分广泛,但是浏览器默认自带的单选框和复选框样式不仅不统一,而且大多都比较简单丑陋.本文给大家介绍了一些基于CSS3的个性化单选框和复选框,一些选中动画是基于jQuery ...

  6. css input checkbox复选框控件 样式美化的多种方案

    checkbox复选框可能是网站中常用的html元素,但大多数人并不满意它的默认样式,这篇文章就讲讲如何实现input checkbox复选框控件 样式美化效果. 资源网站大全 https://55w ...

  7. 自定义常用input表单元素一：纯css 实现自定义checkbox复选框

    最下面那个是之前写的  今天在做项目的时候发现,之前写的貌似还是有点多,起码增加的span标签可以去掉,这样保持和原生相同的结构最好的,仅仅是样式上的变化.今天把项目中的这个给更新上来.下面就直接还是 ...

  8. 纯css3实现美化复选框和手风琴效果（详细）

    关键技术点和原理: 原理就是把 checkbox或 radio 给隐藏掉   ,然后给选框 绑定一个label标签. 然后用label标签作为容器,在里面放一个:before或一个after 用bef ...

  9. 使用CSS3美化复选框checkbox

    我们知道HTML默认的复选框样式十分简陋,而以图片代替复选框的美化方式会给页面表单的处理带来麻烦,那么本文将结合实例带您一起了解一下使用CSS3将复选框checkbox进行样式美化,并且带上超酷的滑动 ...

随机推荐

  1. 第46节：Java当中的常量池

    Java当中的常量池 在Java虚拟机jvm中,内存分布为:虚拟机堆,程序计数器,本地方法栈,虚拟机栈,方法区. 程序计数器是jvm执行程序的流水线,是用来存放一些指令的,本地方法栈是jvm操作系统方 ...

  2. Kali学习笔记18：OpenVAS使用

    上一篇讲了什么是OpenVAS以及如何安装: https://www.cnblogs.com/xuyiqing/p/9690373.html 接下来就是使用: 我先打开一台Metasploitable ...

  3. Java内存溢出异常（下）

    此篇是上一篇文章Java内存溢出异常(上)的续篇,没有看过的同学,可以先看一下上篇.本篇文章将介绍剩余的两个溢出异常:方法区和运行时常量池溢出. 方法区和运行时常量池溢出 这部分为什么会放在一起呢?在 ...

  4. eos开发(一) eos开发环境搭建

    区块链最近挺火的,我又是个非常缺钱的人,所以紧跟了潮流一头扎进区块链的研究中. 这EOS项目是目前比较火的一个项目,相信很多朋友拿到这份EOS的源代码后都会一脸懵逼,因为……这代码写得太高级了,老纸看 ...

  5. redis 系列3 数据结构之简单动态字符串 SDS

    一.  SDS概述 Redis 没有直接使用C语言传统的字符串表示,而是自己构建了一种名为简单动态字符串(simple dynamic string, SDS)的抽象类型,并将SDS用作Redis的默 ...

  6. npm无响应处理办法

    方法一:使用cnpm 1. 安装 `npm install cnpm -g` 2.设置使用淘宝镜像源 `npm install cnpm -g --registry=https://registry. ...

  7. leetcode — two-sum

    package org.lep.leetcode.twosum; import java.util.Arrays; import java.util.HashMap; import java.util ...

  8. tensorflow 1.12.0 gpu + python3.6.8 + win10 + GTX1060 + cuda9.0 + cudnn7.4 + vs2017）

    在安装tensorflow-gpu时,也看过不少的博客,讲得乱七八糟的,也不能这样说,只是每个人安装的环境或需求不一样,因此没有找到一个适合自己的教程去安装tensorflow-gpu版本.当然,入手 ...

  9. 定时备份 MySQL 并上传到七牛

    多数应用场景下,我们需要对重要数据进行备份.并放置到一个安全的地方,以备不时之需. 常见的 MySQL 数据备份方式有,直接打包复制对应的数据库或表文件(物理备份).mysqldump 全量逻辑备份. ...

  10. Logback中使用TurboFilter实现日志级别等内容的动态修改

    可能看到这个标题,读者会问:要修改日志的级别,不是直接修改log.xxx就好了吗?为何要搞那么复杂呢?所以,先说一下场景,为什么要通过TurboFilter去动态的修改日志级别.我们在使用Java开发 ...