css美化checkbox radio样式

/*check,radio*/
input.check_txt[type='checkbox']{
  display: none;
}

input.check_txt[type='checkbox'] + label{
  display: block;
  float: left;
  -moz-appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  background: #fff;
  border:2px solid #cecece;
  border-radius: 3px;  cursor:pointer;
}

input.check_txt[type='checkbox']:checked + label {
    background: #f0f0f0 url(../images/check.png) no-repeat center center;
     background-size:80%;

}

html:

<p class="xd-clause-wrap">
        <input type="checkbox" name="" id="clause" value="">
        <label for="clause"></label>&nbsp;&nbsp;我已阅读并同意<a href="javascript:;">《借款服务条款》</a>
    </p>

 

posted @ 2016-08-04 16:59  觉信  阅读(1258)  评论(0编辑  收藏  举报