Html 用图标替换复选框元素

我想自定义浏览器复选框。选中状态时，应显示图标

checked.svg

，而不是复选框，否则应显示图标

unchecked.svg

这是我的密码。 HTML:

当我点击复选框时，什么也没发生。可能是什么错误？

CSS:

HTML:

---

这也可以通过纯JS实现。

这可以在不使用任何javascript的情况下实现。单击label元素可以切换其中的复选框，因此通过一些巧妙的css，我们可以根据输入的选中状态更改显示

输入[类型=复选框]{
显示：无；
}
.标签{
边框：1px实心#000；
显示：内联块；
填充：3倍；
/*背景：url（“unchecked.png”）无重复左中心；*/
/*左侧填充：15px*/
}
输入[类型=复选框]：选中+标签{
背景：#f00；
颜色：#fff；
/*背景图片：url（“checked.png”）*/
}

---

检查我

您从不单击复选框，因为它是隐藏的。您需要为该复选框设置图像标签，以便它们触发选中/取消选中。它可以工作，但在表单中，您应该在发送表单时使用输入标签来获取值。

<div class="checkbox-custom">
   <input type="checkbox"/>
      <div class="checkmark">
          <img src="@/assets/images/icons/checkbox/unchecked.svg" class="unchecked"/>
          <img src="@/assets/images/icons/checkbox/checked.svg" class="checked"/>
    </div>
</div>

.checkbox-custom {
    position: absolute;
    width: 28px;
    height: 28px;
    left: 0;
    top: 0;

    // Hide default browser checkbox
    input[type=checkbox] {
                display: none;
            }

   input[type=checkbox] + .checkmark {
        position: absolute;
        left: 3.5px;
        top: 3.5px;
        right: 3.5px;
        bottom: 3.5px;

        display: inline-block;
        cursor: pointer;

        img {
            width: 21px;
            height: 21px;
        }

        .checked {
            display: none;
        }
    }    

    input[type=checkbox]:checked + .checkmark {
        .checked {
            display: block;
        }

        .unchecked {
            display: none;
        }
    }
 }

.checkbox{
    width: 23px;
    height: 21px;
     background: transparent url(http://i.stack.imgur.com/S4p2R.png ) no-repeat 0 50%
}
.checked{
    background: transparent url(http://i.stack.imgur.com/S4p2R.png ) no-repeat 80% 50%
}

<div class="checkbox">
</div>

$(".checkbox").click(function(){
    $(this).toggleClass('checked')
});