checkbox自定义样式

十年热恋 提交于 2020-02-15 12:51:11
<div class="form-table-left" style="width: 100%;">
  <span class="span-left">本人承诺提供的信息、材料均合法、真实、有效</span>
  <span class="span-left checkBox">
    <input type="checkBox" name="type" id="adviceRadio1" value="1" checked hidden/>
        <label for="adviceRadio1" class="advice"></label>
  </span>
</div>

 

.advice{
  width: 15px;
  height: 15px;
  display: inline-block;
  background: url('../../assets/images/checkbox-no.png') no-repeat center;
  vertical-align: middle;
  margin-top: -4px;
}
input[type="checkBox"]:checked + .advice{
  background-image: url('../../assets/images/checkbox-yes.png');
}

 

 

转载:https://www.cnblogs.com/fozero/p/8902116.html 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!