css美化checkbox radio样式

时间:2023-01-19 17:04:38
/*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>