In HTML what is an Undetermined Checkbox and how to use this status along with CSS?

Question

As far as I knew a input of the kind Checkbox could have three states, checked, unchecked and disabled. But it seems he has a fourth state which is the undetermined.

See in the image a comparison of the states that the checkbox can assume in different browser.

My question is, how is it possible to set a checkbox as undetermined, since different from the attribute checked the attribute "undetermined" there is no...

I wish I could wear one <input type="checkbox" undetermined name="" id=""> but that didn’t work...

Example: I noticed that in CSS I have how to style elements according to the state of the checkbox, as I would do to style the <label> if the checkbox be it indeterminado?

Code test:

[type="checkbox"] + label {
	color: blue;
}
[type="checkbox"]:checked + label {
	color: green;
}
[type="checkbox"]:disabled + label {
	color: red;
}

<input type="checkbox"  name="" id=""> 
<label>normal </label>
<br>
<input type="checkbox" checked name="" id=""> 
<label>checado </label>
<br>
<input type="checkbox" undetermined name="" id=""> 
<label>indeterminado </label>
<br>
<input type="checkbox" disabled name="" id=""> 
<label>desabilitado </label>
<br>

Answer 1

In fact, there is no property indeterminate that makes the checkbox enter the undetermined state, that because it’s not a state. The indeterminate is merely visual.

The possible states of a checkbox are only true or false (on or off, 1 or 0, or any equivalent variation). The field indeterminate is just a tool for the web developer indicate to the user that the data the application received are insufficient to measure the actual state of the field.

Example: data from a product publication on any Marketplace. There’s on screen one checkbox which defines whether the product is published or not in the external tool. The actual state of the field is defined by calling the Marketplace, but the call fails, for whatever reason. A application will be unable to define whether the product is, or not, published and any state that is placed on checkbox could confuse the user, so the pseudo-state indeterminate.

The only way to define a field checkbox as undetermined is through Javascript, with elemento.indeterminate = true.

const checkbox = document.querySelector('input[type=checkbox]')
checkbox.indeterminate = true;

console.log(checkbox.checked);

<input type="checkbox">

As per the specification WHATWG, the pseudo-state indeterminate is just visual and does not overwrite the current state of the field.

The control is Never a true tri-state control, Even if the element’s indeterminate IDL attribute is set to true. The indeterminate IDL attribute only gives the Appearance of a third state.

That’s why states are just true or false. Note that in the example above it is given that the field is not selected, but if adding the property checked, the return changes, regardless of whether it is undetermined or not.

const checkbox = document.querySelector('input[type=checkbox]')
checkbox.indeterminate = true;

console.log(checkbox.checked);

<input type="checkbox" checked>

The form being submitted, the value sent by the browser will be as defined by the property checked, whether the field is undetermined or not. In the first example the browser would submit the field as false while in the second as true.

If the application is required not to submit indeterminate fields to avoid any kind of conflict between the data, the validation logic should occur exclusively on the client side, with Javascript. The server will have no way of knowing whether the field was submitted as undetermined or not. One way to help the user is by applying a CSS style to the undetermined fields using :indeterminate:

const checkbox = document.querySelector('input[type=checkbox]')
checkbox.indeterminate = true;

:indeterminate + label {
  color: purple;
}

<input type="checkbox">
<label>Publicado?</label>

Answer 2

as it is possible to set a checkbox as undetermined?

This state is defined by a property of the checkbox, that is indeterminate, that can only be accessed using javascript:

there is a third state in which a checkbox may be: indeterminate. This is a state in which it is impossible to tell if the item is enabled or disabled. This is set using indeterminate property of the Htmlinputelement object via Javascript (cannot be defined using an HTML attribute)

Source: Mozilla

I wish I could use one but it didn’t work

Yes, because of the above reason, this attribute can only be accessed via javascript, therefore, different from other attributes like readonly or disabled for example, it cannot be defined in the tag. Here an example:

document.getElementById('i1').indeterminate = true;

input:indeterminate + label {
  background: cyan;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
   <input id="i1" type="checkbox" /> <label>Indeterminated</label>
</p>
<p>
   <input id="i2" type="checkbox" />
</p>

Can be stylized using the pseudoclass :indeterminate, as in the example above.
Source Mozilla

Just to clarify, regardless of the appearance of how it is rendered on each engine, it may be "checked" or not, and remain the same, as this other example:

document.getElementById('i1').indeterminate = true;
document.getElementById('i2').indeterminate = true;
document.getElementById('i2').checked = true;

console.log('i1.checked=' + document.getElementById('i1').checked);
console.log('i2.checked=' + document.getElementById('i2').checked);

<p>
   <input id='i1' type='checkbox'  />
</p>
<p>
   <input id='i2' type='checkbox'  />
</p>