你也可以做一些简单的CSS只为背景色到目前为止，我看到。我希望有一个更简单的方法来做复选标记，你认为这将被视为字体颜色，但它不是

input[type="checkbox"] {
accent-color: desired-color
}

您无法设置浏览器默认复选框的样式，因此我们必须隐藏它并创建一个自定义复选框，如下所示：

.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: #fff;
  border: 2px black solid;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #002B4E;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 6px;
  top: 3px;
  width: 5px;
  height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(35deg);
  -ms-transform: rotate(35deg);
  transform: rotate(35deg);
}

<label class="container">
  <input type="checkbox" checked="checked">
  <span class="checkmark"></span>
</label>

复选框本身是不可能的，但是可以在它们上面放置一个CSS过滤器，而不必隐藏它来代替额外的HTML。

input[type="checkbox"] {
    filter: sepia(100%) brightness(80%) hue-rotate(170deg) saturate(70%) contrast(300%);
}

• 然而 *，请记住不同的浏览器处理复选框和过滤器的方式不同。我已经在Edge、Chrome和Firefox上测试过了，它看起来和你的颜色有很大的不同。

不同浏览器中HTML输入按钮的CSS过滤解释之间的差异

对于daddycardona's useful answer，他建议使用accent-color，请注意accent-color只会对:checked复选框的复选框背景进行样式化。
您无法设置未选中复选框的背景样式-但您可以为它们指定不透明度，这将有效地为它们提供暗淡的背景 * 如果它们位于深色背景上 *。

document.getElementById('btn').addEventListener('click', () => {
  document.querySelector('body').style.background = 'darkslategrey';
  document.querySelector('#two').style.accentColor = '#4f704f';
});

body{font-size:1.5rem;color:white;background:#222;}
input[type=checkbox]{transform:scale(2); margin:0px 30px 10px;}
hr{position:relative;bottom:4px; border-bottom:1px solid #cccccc11;}
.accent{accent-color: #49596e; }
.accent:not(:checked){opacity:0.5;}
span{font-size:0.8em;}

<div><input type="checkbox" /> UN-Checked and unstyled <span>(too bright)</span></div>
<div><input type="checkbox" checked /> Checked and unstyled</div>
<hr>
<div><input type="checkbox" class="accent" /> UN-Checked with opacity <span>(less glaring)</span></div>
<div><input type="checkbox" class="accent" checked id="two"/> Checked with accent-color</div>
<button id="btn">Change background color</buttton>