我已经尝试了我能找到的任何东西，基本上总的想法是使用以下css规则：
input[type=checkbox][disabled] {
background: red !important;
background-color: red !important;
outline: 1px solid red;
}
问题是，唯一起作用的规则是大纲。背景不会以任何方式改变。它仍然是灰色的。我提供了上面发布的css规则的结果的屏幕截图。
有什么工作方法可以成功地更改禁用复选框的背景颜色吗？
本机外观无法实现此功能，因此必须使用label创建自定义模板，并使用类似:before或:after:的伪元素：
null
.flex-container {
display: flex;
flex-flow: row-wrap;
}
.flex-column {
padding: 0 15px;
flex: 0 0 auto;
}
[type="checkbox"]:checked,
[type="checkbox"]:not(:checked) {
position: absolute;
left: -9999px;
}
[type="checkbox"]:checked + label,
[type="checkbox"]:not(:checked) + label
{
position: relative;
padding-left: 28px;
cursor: pointer;
line-height: 20px;
display: inline-block;
color: #666;
}
[type="checkbox"]:checked + label:before,
[type="checkbox"]:not(:checked) + label:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 18px;
height: 18px;
border: 1px solid #ddd;
background: #fff;
border-radius: 5px;
}
[type="checkbox"]:checked + label:after,
[type="checkbox"]:not(:checked) + label:after {
content: '';
width: 8px;
height: 8px;
background: #00579c;
position: absolute;
top: 6px;
left: 6px;
border-radius: 50%;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
}
[type="checkbox"]:not(:checked) + label:after {
-webkit-transform: scale(0);
transform: scale(0);
}
[type="checkbox"]:checked + label:after {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
[type="checkbox"]:disabled + label {
opacity: 0.7;
cursor: not-allowed;
}
[type="checkbox"]:disabled + label:before {
border-color: red;
} <div class="flex-container">
<div class="flex-column">
<input type="checkbox" id="test2">
<label for="test2">Default</label>
</div>
<div class="flex-column">
<input type="checkbox" id="test1" checked>
<label for="test1">Checked</label>
</div>
<div class="flex-column">
<input type="checkbox" id="test3" disabled>
<label for="test3">Disabled</label>
</div>
</div>