如何更改HTML复选框输入中复选标记的颜色？
最佳答案
这是一个纯CSS解决方案，不应破坏屏幕阅读器或默认的用户代理操作。此外，最新的四大浏览器版本也支持此功能(如果添加一些其他黑客，则还有其他一些版本，但我将由您自己确定；由于使用了IE8 +，它可能不会获得更多支持)伪元素)。
这个想法是隐藏实际的表单元素(因为浏览器用内部样式进行了硬替换，并且还没有将所有样式功能都提供给CSS)，然后用我们喜欢的样式替换。副作用是，您将需要跟踪JS中的更改事件，而不是单击事件(但是您是否正在这样做呢？)。
由于标签与表单元素绑定(bind)在一起，因此单击它就像预期的那样工作，因此新的，很棒的复选框(::before)会使用原始文档上的属性选择器([checked])来检查其是否为checked。当它被选中时，将显示我们的awesomer选中标记(::after)。
选中标记(::after)滥用边框宽度的厚度和高度/宽度来制作类似项目的选中标记。最后，我们将盒子变形为45deg以正确匹配 Angular 。
要更改选中标记的颜色，请更改::after样式的边框颜色。另外，如果您希望它始终与您的文本颜色匹配，请完全删除其边框颜色。要更改收音机，请更改径向渐变开始颜色(非白色)。
还很棒的是它与字体大小有关，因此，如果您的文本较大，则应完全填充(尽管在使用相对字体大小时可能会出现舍入错误，因此请注意)
我包括了两种可检查类型(复选框和单选)的基本样式。
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:
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);
}
旁注:necropost，因为这是我想起自己过去如何提出时的第一个问题。 ;)
关于html - CSS/HTML:如何更改复选框输入中的复选标记的颜色？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/2639373/