警告:在撰写本文时，以下内容是正确的，但与此同时，事情有了进展。

AFAIK现代浏览器使用本机操作系统控件显示复选框，所以没有办法对它们进行样式化。

现在只使用CSS就可以改变所有复选框的颜色:

如前所述，当选中复选框时，最近的重音颜色CSS属性用于更改复选框的颜色。 然而，我没有看到其他人提到的是，当复选框未选中时，如果你使用CSS的过滤器属性，你可以改变背景颜色和/或边界。

对于简单的更改，您可以使用亮度将白色背景颜色变深为灰色或黑色，并使用色调旋转可以为边界赋予颜色(至少在Firefox中是这样)。然而，如果你想完全改变背景为任何颜色，你也可以用滤镜来做到这一点，但你必须做一些技巧，你将多个滤镜组合在一起，基于这个问题的方法:如何仅使用CSS滤镜将黑色转换为任何给定的颜色

幸运的是，这种复杂的方法似乎在所有浏览器中都有效，并且您可以使用生成器来计算所需的过滤器:https://codepen.io/jumarjuaton/full/mdJYWYq (这个链接是从白色转换而来的，不像上面链接的问题)

请看下面的例子:

/* Disable 'filters' while checked since they impact 'accent-color'. */ input[type='checkbox']:checked { filter: none; } input[type='radio']:checked { filter: none; } /** * We use 'accent-color' for colors in the checked stated and we use * 'filter' to change the background colors in the unchecked state. */ .red-bg-input { accent-color: red; filter: invert(85%) sepia(83%) saturate(6726%) hue-rotate(360deg) brightness(111%) contrast(111%); } .green-bg-input { accent-color: green; filter: invert(49%) sepia(65%) saturate(7149%) hue-rotate(92deg) brightness(89%) contrast(103%); } .blue-bg-input { accent-color: blue; filter: invert(30%) sepia(99%) saturate(6101%) hue-rotate(202deg) brightness(52%) contrast(136%); } .teal-bg-input { accent-color: teal; filter: invert(58%) sepia(77%) saturate(3139%) hue-rotate(157deg) brightness(89%) contrast(101%) } .dark-input { accent-color: black; filter: brightness(0%) saturate(100) hue-rotate(25deg); } .gray-input { accent-color: purple; filter: brightness(60%) saturate(100) hue-rotate(25deg); } .orange-bg-input { accent-color: orange; filter: invert(63%) sepia(28%) saturate(7249%) hue-rotate(0deg) brightness(103%) contrast(105%); } <input type="checkbox" /> <input type="checkbox" checked/> <input type="radio" /> <input type="radio" checked /> Defaults <br> <input class="red-bg-input" type="checkbox" /> <input class="red-bg-input" type="checkbox" checked/> <input class="red-bg-input" type="radio" /> <input class="red-bg-input" type="radio" checked/> Red <br> <input class="green-bg-input" type="checkbox" /> <input class="green-bg-input" type="checkbox" checked/> <input class="green-bg-input" type="radio" /> <input class="green-bg-input" type="radio" checked/> Green <br> <input class="blue-bg-input" type="checkbox" /> <input class="blue-bg-input" type="checkbox" checked/> <input class="blue-bg-input" type="radio" /> <input class="blue-bg-input" type="radio" checked/> Blue <br> <input class="teal-bg-input" type="checkbox" /> <input class="teal-bg-input" type="checkbox" checked/> <input class="teal-bg-input" type="radio" /> <input class="teal-bg-input" type="radio" checked/> Teal <br> <input class="orange-bg-input" type="checkbox" /> <input class="orange-bg-input" type="checkbox" checked/> <input class="orange-bg-input" type="radio" /> <input class="orange-bg-input" type="radio" checked/> Orange <br> <input class="dark-input" type="checkbox" /> <input class="dark-input" type="checkbox" checked/> <input class="dark-input" type="radio" /> <input class="dark-input" type="radio" checked/> Black/dark <br> <input class="gray-input" type="checkbox" /> <input class="gray-input" type="checkbox" checked/> <input class="gray-input" type="radio" /> <input class="gray-input" type="radio" checked/> Purple + Gray background

您可以避免添加额外的标记。这适用于任何地方，除了IE通过设置CSS外观:

输入(type = "复选框"){ -webkit-appearance:没有; -moz-appearance:没有; 外观:无; /*样式复选框*/ 宽度:16 px; 高:16 px; 背景颜色:红色; ｝ 检查输入(type = "复选框"):{ 背景颜色:绿色; ｝ <input type="checkbox" />

警告:在撰写本文时，以下内容是正确的，但与此同时，事情有了进展。

AFAIK现代浏览器使用本机操作系统控件显示复选框，所以没有办法对它们进行样式化。

实现简单，易于定制的解决方案

经过大量的搜索和测试，我得到了这个解决方案，它是简单的实现和更容易定制。在此解决方案中:

您不需要外部库和文件 你不需要加 在页面中添加额外的HTML 您不需要更改复选框名称 和id

简单地把流动的CSS放在你的页面顶部，所有的复选框样式将像这样改变:

input[type=checkbox] { transform: scale(1.5); } input[type=checkbox] { width: 30px; height: 30px; margin-right: 8px; cursor: pointer; font-size: 17px; visibility: hidden; } input[type=checkbox]:after, input[type=checkbox]::after { content: " "; background-color: #fff; display: inline-block; margin-left: 10px; padding-bottom: 5px; color: #00BFF0; width: 22px; height: 25px; visibility: visible; border: 1px solid #00BFF0; padding-left: 3px; border-radius: 5px; } input[type=checkbox]:checked:after, input[type=checkbox]:checked::after { content: "\2714"; padding: -5px; font-weight: bold; } <input type="checkbox" id="checkbox1" /> <label for="checkbox1">Checkbox</label>

一个简单而轻量级的模板:

input[type=checkbox] { cursor: pointer; } input[type=checkbox]:checked:before { content: "\2713"; background: #fffed5; text-shadow: 1px 1px 1px rgba(0, 0, 0, .2); font-size: 20px; text-align: center; line-height: 8px; display: inline-block; width: 13px; height: 15px; color: #00904f; border: 1px solid #cdcdcd; border-radius: 4px; margin: -3px -3px; text-indent: 1px; } input[type=checkbox]:before { content: "\202A"; background: #ffffff; text-shadow: 1px 1px 1px rgba(0, 0, 0, .2); font-size: 20px; text-align: center; line-height: 8px; display: inline-block; width: 13px; height: 15px; color: #00904f; border: 1px solid #cdcdcd; border-radius: 4px; margin: -3px -3px; text-indent: 1px; } <input type="checkbox" checked="checked">checked1<br> <input type="checkbox">unchecked2<br> <input type="checkbox" checked="checked" id="id1"> <label for="id1">checked2+label</label><br> <label for="id2">unchecked2+label+rtl</label> <input type="checkbox" id="id2"> <br>

https://jsfiddle.net/rvgccn5b/