CSS/HTML：如何更改复选框输入中复选标记的颜色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2639373/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS/HTML: How do I change the color of the check mark within the checkbox input?
提问by JessicaM
How do I change the color of the check mark within an HTML checkbox input?
如何更改 HTML 复选框输入中复选标记的颜色？
回答by Kevin Peno
Here's a pure CSS solution that shouldn't break screen readers or default user agent actions. Additionally, this is supported in the latest versions of the big 4 browsers (and a few others if you add some additional hacks, but I'll leave that to you to figure out; probably won't get more than IE8+ support since it uses pseudo elements).
这是一个纯 CSS 解决方案，不应破坏屏幕阅读器或默认用户代理操作。此外，这在 4 大浏览器的最新版本中得到支持（如果您添加了一些额外的 hack，还有其他一些浏览器，但我会让您自己弄清楚；可能不会获得超过 IE8+ 的支持，因为它使用伪元素）。
The idea is to hide the actual form element (because browsers do a hard replace with internal styles and don't expose all style-ability to css yet) and replace it with one we like. One side effect is that you will want to track change events rather than click events in your JS if you need it (but you were doing that anyway right?).
这个想法是隐藏实际的表单元素（因为浏览器会用内部样式进行硬替换，并且还没有将所有样式功能暴露给 css）并将其替换为我们喜欢的元素。一个副作用是，如果需要，您将希望在 JS 中跟踪更改事件而不是单击事件（但无论如何您都在这样做，对吗？）。
Because the label is tied to the form element clicking it works like one would expect, so the new, awesome, checkbox (::before) abuses attribute selectors ([checked]) on the original to check if it is checked. When it is checked it will display our awesomer checkmark (::after).
因为标签与表单元素相关联，点击它就像人们期望的那样工作，所以新的、很棒的复选框 ( ::before) 滥用[checked]原始属性选择器 ( ) 来检查它是否是checked。当它被选中时，它会显示我们更棒的复选标记 ( ::after)。
The checkmark (::after) abuses border width for thickness and height/width for making a checkmark like item. Finally, we transform the box 45deg to match the angle up properly.
复选标记 ( ::after) 滥用边框宽度作为厚度和高度/宽度来制作类似项目的复选标记。最后，我们将盒子变换 45deg 以正确匹配角度。
To change the color of the checkmark, change the border color on the ::afterstyle. Additionally, if you wanted it to always match your text color remove the border color on it altogether. To change the radio, change the radial gradient start color (the one that isn't white).
要更改复选标记的颜色，请更改::after样式上的边框颜色。此外，如果您希望它始终与您的文本颜色相匹配，请完全删除它的边框颜色。要更改收音机，请更改径向渐变开始颜色（不是白色的颜色）。
Also awesome is that its tied to font size, so if your text is bigger, it should shim right in (though rounding errors can happen when using relative font sizes, so be careful)
同样很棒的是它与字体大小相关，所以如果你的文本更大，它应该正确地填充（尽管使用相对字体大小时可能会发生舍入错误，所以要小心）
I've included basic styles for both check-able types (checkbox and radio).
我已经包含了两种可检查类型（复选框和收音机）的基本样式。
HTML:
HTML：
<fieldset>
<legend>Checkbox example</legend>
<input id="checkbox" type="checkbox"/>
<label for="checkbox">Some awesome checkbox label</label>
</fieldset>
<fieldset>
<legend>Radio example</legend>
<div>
<input id="radio1" type="radio" name="radio"/>
<label for="radio1">Some awesome radio option #1</label>
<div>
</div>
<input id="radio2" type="radio" name="radio"/>
<label for="radio2">Some awesome radio option #2</label>
</div>
</fieldset>
CSS:
CSS：
label, input[type="radio"], input[type="checkbox"] {
line-height: 2.1ex;
}
input[type="radio"],
input[type="checkbox"] {
position: absolute;
left: -999em;
}
input[type="radio"] + label,
input[type="checkbox"] + label {
position: relative;
overflow: hidden;
cursor: pointer;
}
input[type="radio"] + label::before,
input[type="checkbox"] + label::before {
content: "";
display: inline-block;
vertical-align: -25%;
height: 2ex;
width: 2ex;
background-color: white;
border: 1px solid rgb(166, 166, 166);
border-radius: 4px;
box-shadow: inset 0 2px 5px rgba(0,0,0,0.25);
margin-right: 0.5em;
}
input[type="radio"]:checked + label::before {
background: radial-gradient(circle at center, #1062a4 .6ex, white .7ex);
}
input[type="radio"] + label::before {
border-radius: 50%;
}
input[type="checkbox"]:checked + label::after {
content: '';
position: absolute;
width: 1.2ex;
height: 0.4ex;
background: rgba(0, 0, 0, 0);
top: 0.9ex;
left: 0.4ex;
border: 3px solid #1062a4;
border-top: none;
border-right: none;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
Side note: necropost because this was the first question that popped up when I was trying to remember how I pulled this off in the past. ;)
旁注：necropost 因为这是当我试图记住我过去如何解决这个问题时出现的第一个问题。;)
回答by xandercoded
You could create a checkbox image and use that as your checkbox
您可以创建一个复选框图像并将其用作您的复选框
The following post discusses custom input controls...
以下帖子讨论了自定义输入控件...
回答by mykhailohoy
If you need to change tick color from black to white, just try applying filter: invert(1)to the checkbox.
如果您需要将刻度颜色从黑色更改为白色，只需尝试应用filter: invert(1)到复选框。
回答by SamGoody
You can imitate a check box with another element and set the background color as desired.
您可以使用另一个元素模仿复选框并根据需要设置背景颜色。
I haven't tried to make it perfect, just to demonstrate the concept. As you can see, the background color is green, no images, no libraries involved; minimal js.
我没有试图让它完美，只是为了演示这个概念。如您所见，背景颜色为绿色，不包含图像，不涉及任何库；最小的js。
WAIT!!!
MVC purists and other fanatics - You can easily move the js into its own little method, but am trying
to demonstrate the simplicity - pretty
please don't down-vote me for this.
sigh.
等待！！！
MVC 纯粹主义者和其他狂热分子 - 您可以轻松地将 js 移动到它自己的小方法中，但我试图证明它的简单性 - 请不要为此给我投票。
叹。
回答by Missu Lee
If you use b-form-checkboxand you will find cssof mark is svglike that...
如果您使用b-form-checkbox并且您会发现css标记是svg这样的......
.custom-checkbox
.custom-control-input:checked
~ .custom-control-label::after {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath **fill='%23000'** d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e");
It's drawn by svg, so you can change coordinate to modify mark or change fillto change mark color.
它由 绘制svg，因此您可以更改坐标以修改标记或更改fill以更改标记颜色。
