checkbox自定义样式

最新推荐文章于 2024-01-02 16:06:35 发布

前端路上迷茫的小鲨鱼

最新推荐文章于 2024-01-02 16:06:35 发布

阅读量142

点赞数

CC 4.0 BY-SA版权

分类专栏： css

原文链接：https://www.cnblogs.com/fozero/p/8902116.html

css 专栏收录该内容

23 篇文章

订阅专栏

本文介绍了一种通过HTML和CSS实现的表单承诺信息验证方式，利用复选框和自定义样式来显示用户是否同意提供的信息合法、真实、有效。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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');
}