Customize CSS for indeterminate state checkbox

checkbox, css

Solution

This is the `:indeterminate` selector..

https://developer.mozilla.org/en-US/docs/Web/CSS/:indeterminate

tag.class:indeterminate {}

In this case you can change the `background:` attribute to the image you like.

Something along the lines of:

tag.class:indeterminate {
    background: url("/image");
}

I recommend you look into this handling of `:checked` for styling your checkboxes:

- Change checkbox check image to custom image

EDIT: Or as @FelixLahmer added, use: http://www.csscheckbox.com/css-checkbox-generator.php

Problem

I have a feature that enables tristate check boxes. Following is the snapshot of the check boxes that appear in Chrome: The third checkbox in the snapshot above has `indeterminate` state. This state has browser specific CSS. I need to change the CSS of third checkbox to look something like: I am fairly new to CSS. Any help would be appreciated. Thanks in advance.

Original source

Related problems