用图标替换复选框元素

Question

我想自定义浏览器复选框。当状态被选中时，应该显示 图标，checked.svg而不是复选框和图标unchecked.svg。

这是我的代码。HTML：

<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>

SAS：

.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;
        }
    }
 }

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

Answer 1

这无需任何 JavaScript 即可完成。单击 label 元素会切换其中的复选框，因此通过一些巧妙的 css，我们可以根据输入的选中状态更改显示。

input[type=checkbox] {
  display: none;
}
.label {
  border: 1px solid #000;
  display: inline-block;
  padding: 3px;
  /* background: url("unchecked.png") no-repeat left center; */ 
  /* padding-left: 15px; */
}
input[type=checkbox]:checked + .label {
  background: #f00;
  color: #fff;
  /* background-image: url("checked.png"); */
}

<label><input type="checkbox"><span class="label">Check me</span></label>

更改 .label 样式以使用您选择的背景图像（并将其放置在文本的左侧）。

Answer 2

http://jsfiddle.net/pKM3x/

CSS：

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

HTML：

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

查询：

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

这也可以用纯 JS 来完成。