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