如何自定义处于不确定状态的复选框的样式?

Question

所以我正在尝试自定义我的复选框，使其在不确定状态下看起来像这样。选中和未选中的工作正常，但我无法使不确定的正常工作。任何帮助将不胜感激！
我已经尝试了tag.class:indeterminate {}并在样式表中input[type=checkbox]:indeterminate {}，但它似乎不起作用。

我的代码和 CSS 示例：链接

Answer 1

你应该对:indeterminate状态的::before和::after伪元素执行类似的方法，就像你对:checked状态所做的那样。

从 CSS 中删除此部分：

input[type=checkbox]:indeterminate {
content: "";
display: block;
color: white;
width: 17px;
height: 17px;
background-color:#3B99FC;
}

将这些添加到 CSS 中：

input[type=checkbox]:indeterminate::before {
content: "";
display: block;
color: white;
width: 17px;
height: 17px;
background-color:#3B99FC;
}
input[type=checkbox]:indeterminate::after {
content: "";
display: block;
width: 10px;
height: 10px;
border: solid white;
border-width: 2px 0 0 0;
position: absolute;
top: 9px;
left: 5px;
}

您可以在样式中调整不确定状态减号的大小/位置input[type=checkbox]:indeterminate::after。