css only checkbox custom

Checkbox that you created in only css If you do not want to use the image.require compass and sass(scss) see

HTML

<input id="login" type="checkbox" value="on" name="login">
<label for="login">test</label>

CSS

html :not(.oldie) input[type="checkbox"],
html :not(.ie9) input[type="checkbox"] {
  visibility: hidden;
}
html :not(.oldie) input[type="checkbox"]:checked + label:after, html :not(.oldie) input[type="checkbox"]:checked + label:hover::after,
html :not(.ie9) input[type="checkbox"]:checked + label:after,
html :not(.ie9) input[type="checkbox"]:checked + label:hover::after {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
  background: #f7f7f7;
}
html :not(.oldie) input[type="checkbox"] + label,
html :not(.ie9) input[type="checkbox"] + label {
  position: relative;
  cursor: pointer;
}
html :not(.oldie) input[type="checkbox"] + label:hover::after,
html :not(.ie9) input[type="checkbox"] + label:hover::after {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20);
  opacity: 0.2;
}
html :not(.oldie) input[type="checkbox"] + label:before,
html :not(.ie9) input[type="checkbox"] + label:before {
  position: absolute;
  top: 0;
  left: -13px;
  width: 13px;
  height: 13px;
  border: 1px solid #eeeeee;
  background-color: white;
  content: "";
  cursor: pointer;
}
html :not(.oldie) input[type="checkbox"] + label:after,
html :not(.ie9) input[type="checkbox"] + label:after {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  position: absolute;
  top: 3px;
  left: -11px;
  width: 7px;
  height: 3px;
  border: 3px solid #6e6e6e;
  border-top: none;
  border-right: none;
  background: transparent;
  content: "";
}