Customize CSS for indeterminate state checkbox

Question

I have a feature that enables tristate check boxes.

Following is the snapshot of the check boxes that appear in Chrome:

enter image description here

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: enter image description here

I am fairly new to CSS. Any help would be appreciated.

Thanks in advance.

Have you looked at this? http://stackoverflow.com/questions/4148499/how-to-style-checkbox-using-css There are lots of tutorials/samples/generators and stuff. — keaukraine, Feb 10 '14 at 09:43
@albert I would like to cover almost all browsers available. — varunvlalan, Feb 10 '14 at 10:14
Got you covered with my answer @varunvlalan, across all compatible browsers. — digitalextremist, Feb 10 '14 at 13:44

score 4 · Answer 1 · edited May 23 '17 at 12:22

4

This is the `:indeterminate` selector..

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:

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

edited May 23 '17 at 12:22

Community

answered Feb 10 '14 at 09:44

digitalextremist

3

I dont want to create another answer, but may add that you can generate it very easily using http://www.csscheckbox.com/css-checkbox-generator.php – CodeFanatic Feb 10 '14 at 09:47
Implemented using what @FelixLahmer suggested. Thanks. – varunvlalan Feb 11 '14 at 12:54