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

How can you set a checkbox as undetermined?

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

  

There is a third state where a checkbox can be:   indeterminate This is a state in which it is impossible to tell whether the item   is enabled or disabled. This is defined using the   indeterminate property of the HTMLInputElement object via JavaScript   (can not be set using an HTML attribute)

Source: mozilla

I wish I could use one but this did not work

Yes, because of the above reason, this attribute can only be accessed via javascript , so unlike other attributes like readonly or disabled , for example, can not be defined in the tag. Here's 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><inputid="i1" type="checkbox" /> <label>Indeterminated</label>
</p>
<p>
   <input id="i2" type="checkbox" />
</p>

Can be styled using pseudoclass :indeterminate , as in the example above. Source mozilla

Just to clarify, it does not depend on the appearance of how it is rendered in each engine, it can be checked or not, and remain the same, according to this 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>

In fact, there is no indeterminate property that makes checkbox go into undetermined state, this is because it is not a state . indeterminate is merely visual.

The possible states of a checkbox are just true or false or off / em>, 1 or 0, or any equivalent variation). The indeterminate field is just a tool for web developer to indicate to the user that the data that the application received is insufficient to gauge the real state of the field.

Example : Data from a product publication in some marketplace . There is a checkbox on the screen that defines whether or not the product is published in the external tool. The actual state of the field is defined through a marketplace API call, but the call fails for any reason. The application will be unable to define whether or not the product is published and any state that is placed in the checkbox could confuse the user, pseudo-state indeterminate .

The only way to define a checkbox field 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">

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

  

The control is never true tri-state control, even if the indeterminate element 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 above example the field is not selected, but if you add the checked property, 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 defined by the checked property, regardless of 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's requirement is not to submit undetermined fields to avoid any type of data conflict, the validation logic must occur exclusively on the client side with JavaScript. The server will not know if the field was submitted as undetermined or not. One way to assist the user is to apply a style with CSS in undefined fields using :indeterminate :

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

:indeterminate + label {
  color: purple;
}

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