CSS input checkbox自定义样式

原文出处：http://www.manongjc.com/article/58.html

[效果图]

[HTML]

<div class="compare_button">
  <input type="checkbox" id="compare_39680" class="checkbox-input" >
  <label class="checkboxcss" for="compare_39680"></label>
  <span>compare text</span>  
</div>

[CSS]

.compare_button .checkboxcss {
  cursor: pointer;
  position: absolute;
  width: 15px;
  height: 15px;
  top: 0;
  left: 0;
  background: #f7f7f7;
  border: 2px solid #f5b34f;
  border-radius: 5px;
}

.compare_button {
  position: relative;
}

.compare_button .checkboxcss:after {
  opacity: 0;
  content: '';
  position: absolute;
  width: 7px;
  height: 3px;
  background: transparent;
  top: 3px;
  left: 3px;
  border: 3px solid #1e8cc5;
  border-top: none;
  border-right: none;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.compare_button input[type=checkbox]:checked + label:after {
  opacity: 1;
}