Html 将复选框从勾号更改为纯色背景色

默认情况下，选中复选框时，会在框中打勾。我正在尝试将其更改为纯色，无论是css背景还是检查后的图像

内容

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

请看

HTML:

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

$("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");
  }
});

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

CSS:

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

$("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");
  }
});

.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（）

）