Angular中如何修改禁用状态下checkbox（复选框）的颜色

解决方案 #

你当前CSS仅在悬浮时生效的原因是选择器中包含:hover伪类，仅会在鼠标悬浮到关联label上时触发匹配。要让样式始终作用于禁用状态的checkbox，直接移除选择器中的:hover即可：

input[type="checkbox"]:disabled + label::before {
  background-color: red;
  border: 1px solid #d4d4d5;
}

如果修改后样式仍不生效，通常是UI框架或浏览器默认给禁用表单元素添加了透明度、灰度滤镜的默认样式，可以追加以下代码覆盖默认规则：

input[type="checkbox"].custom-control-input:disabled {
  opacity: 1;
  filter: none;
}

内容的提问来源于stack exchange，提问作者vidya