CSS Input checkbox Custom Style

Original source: http://www.manongjc.com/article/58.html

[Effect Diagram]

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