html - 将选中的复选框从勾号更改为纯色背景色

Question

默认情况下，当您选中一个复选框时，它会在该框中打勾。我正在尝试将其更改为纯色天气它是 css 背景或检查时的图像。 http://bootply.com/71996

<label class="checkbox">
    <input type="checkbox" value="">
    Content
</label>

我在这里搜索并阅读了一些答案，但没有定论和简单的答案。

Answer 1

看your updated code .

HTML:

<label class="checkbox">
<input value="" type="checkbox">
Content
</label>

JavaScript:

$("input[type=checkbox]").on("change", function() {
  var $chk = $(this);
  var isChecked = $chk.prop('checked');
  if (isChecked) {
    $chk.parent().addClass("checked");
  }
  else {
    $chk.parent().removeClass("checked");
  }
});

CSS:

.checkbox { color:blue; }
.checkbox:before { content:""; background-color:blue; width:15px; height:18px; display:block; position:absolute; margin-left:-20px; }
.checkbox.checked { color:red; }
.checkbox.checked:before { background-color:red; }

注意:

JavaScript 可以简化，但我有意在每次更改时检查值(而不是使用 .toggleClass())。