How to make checkbox tri-state? - css

Question

Technology Used : Angular 5
Scenario :
I have a tree view with a checkbox. Whenever data is loaded onto the page, based on the property I am making checkbox checked or unchecked.
Todo :
Whenever property is false I want to add a cross mark in checkbox by default.
Below is my code which will render tree view with the checkbox.
<tree-root #tree [options]="options" [nodes]="nodes">
<ng-template #treeNodeTemplate let-node="node" let-index="index">
<input (change)="check(node, !node.data.checked)"
type="checkbox"
[indeterminate]="node.data.indeterminate"
[checked]="node.data.checked" class="css-checkbox">
{{ node.data.name }}
</ng-template>
</tree-root>
In the above code snippet whenever node.data.checked is true then I am making checkbox checked by default. Whenever node.data.checked comes false I want to display cross mark in the checkbox.
I have searched over the net but did not get any use full links.
Can someone help me to make this work?
Any help would be greatly appreciated. Thank you.

Answer 1

When you trigger [checked], the :checked pseudo-class will be applied. You can use this to target checkboxes which have been checked (either manually or programmatically).
Adding a cross in the checkbox is a little harder, as you cannot add one to an input[type=checkbox] itself. To get around this, you can hide the checkbox itself (with display: none), and make use of a <label> which is associated with the checkbox, bound by the label's for attribute. By using for, when clicking on the label you'll simulate clicking on the checkbox itself.
The label can be styled to look like the original checkbox, and also offers extra flexibility, allowing for things like a background-image (which can be used to show the cross).
Assuming your <label> elements come directly after your <input> elements, you can target them with the adjacent sibling combinator (+), with selectors such as input + label. This can be chained with the :checked pseudo-class to style the labels for the checkboxes that are checked: input:checked + label.
Here's an example:
input[type=checkbox].css-checkbox {
display: none;
}
input[type=checkbox].css-checkbox + label.css-label {
padding-left: 20px;
height: 15px;
display: inline-block;
line-height: 15px;
background-repeat: no-repeat;
background-position: 0 0;
font-size: 15px;
vertical-align: middle;
cursor: pointer;
}
input[type=checkbox].css-checkbox:checked + label.css-label {
background-position: 0 -15px;
}
.css-label {
background-image: url(http://csscheckbox.com/checkboxes/lite-x-red.png);
}
<input id="one" class="css-checkbox" type="checkbox" />
<label for="one" class="css-label"></label>
<input id="two" class="css-checkbox" type="checkbox" />
<label for="two" class="css-label"></label>
While a checkbox can only ever have two states (either checked or unchecked), what is possible with Angular is to update the associated class of the element. If you want a tick (or similar) as well, this is your best bet.
Simply create one class for when the value is truthy, one for when it is falsy, and apply the relevant class to the label depending on the value. The positive class would have a check background-image, and the negative class would have a cross. The 'default' would show up empty, as is in the above example.