How can I customize the style of a checkbox which is in indeterminate state?

Question

So I'm trying to customize my checkbox so that it will look like this in indeterminate state. The checked and unchecked work fine, but I can't make the indeterminate one show up properly. Any help would be greatly appreciated!
I have tried tag.class:indeterminate {} and input[type=checkbox]:indeterminate {} in the style sheet but it doesn't seem to work.

My code and CSS sample: Link

Answer 1

You should do the similar approach on ::before and ::after pseudo-elements for the :indeterminate state, just like you did with :checked state.

Remove this part from CSS:

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

Add these to 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;
}

You can adjust the size/position of the indeterminate state minus-sign inside input[type=checkbox]:indeterminate::after style.