改变checkbox的默认样式（兼容）

方式1：利用了css3存在兼容性问题 

html: 

<p class="agree"><input type="checkbox" id="check"><span>&nbsp;&nbsp;我同意以上协议</span></p>

scss:

  .agree {
    line-height: pxTorem(60px);
    margin: pxTorem(50px) 0;
    position: relative;
    span {
      position: absolute;
      left: pxTorem(50px);
      top:pxTorem(15px);
    }
  }
  input[type="checkbox"]{ -webkit-appearance: none;width:20px;height:20px; border-radius: 50%; display: inline-block;text-align: center;vertical-align: middle; line-height: 18px;position: relative;}
  input[type="checkbox"]::before{content: "";position: absolute;border-radius: 50%;top: 0;left: 0;background: #fff;width: 100%;height: 100%;border: 1px solid #d9d9d9}
  input[type="checkbox"]:checked::before{content: "\2713";