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

user_5901319 0
Viewed 1184

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

reactjs checkbox css
1 Answers

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.

user_8758010
Related