Replace default checkbox with a much nicer version.

CSS3 Checkbox

<form>
  <div class="check">
    <input type="checkbox" value="None" id="newsletter" name="check" />
    <label for="newsletter"></label>
  </div>
</form>

form {
  input[type=checkbox] {
    visibility: hidden;

    &:checked + label:after {
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
      filter: alpha(opacity=100);
      opacity: 1;
    }
  }

  .check {
    width: 28px;
    height: 28px;
    margin: 20px auto;
    position: relative;
    background: #ececec;

    label {
      width: 28px;
      height: 28px;
      position: absolute;
      left: 0;
      top: 0;
      cursor: pointer;

      &:after {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
        opacity: 0;
        content: '';
        position: absolute;
        width: 28px;
        height: 28px;
        background: yellow;
        top: 0;
        left: 0;
      }

      &:hover::after {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
        filter: alpha(opacity=30);
        opacity: 0.3;
      }
    }
  }
}