:indeterminate

Pseudo-class used to style three elements: checkboxes, radio buttons, and progress bars.

Useful in two cases. Firstly, for styling elements in their initial state — when opening a form or starting a download. Secondly, for showing the user the incompleteness of the selection or download process.

For checkboxes and radio buttons, the indeterminate state cannot be directly assigned in HTML; it can be set only through JavaScript.

The browser assigns :indeterminate to the progress bar automatically if the value attribute is not defined — percentage of loading.

• <input type="checkbox"> if not all items in the nested group have been selected. It shows the user that they have interacted with not all the options presented to them.
• A group of <input type="radio"> with the same name attribute, but where no element is set to checked. It shows the user that they skipped an option and did not select their choice.
• <progress>. Shows the loading process but does not display its progress.

After the selector that selects the progress bar, checkbox, or group of radio buttons, put a colon and write the keyword indeterminate, and specify the styles.

        
          
          input:indeterminate {  opacity: 0.45;}
          input:indeterminate {
  opacity: 0.45;
}

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

The browser assigns the pseudo-class :indeterminate to a checkbox or radio button when they are defined this way through JavaScript. We can use this pseudo-class to style an untouched form element by highlighting the incompleteness of the selection.

        
          
          const inputs = document.getElementsByTagName('input');for (let i = 0; i < inputs.length; i++) {  inputs[i].indeterminate = true;}
          const inputs = document.getElementsByTagName('input');

for (let i = 0; i < inputs.length; i++) {
  inputs[i].indeterminate = true;
}

        
        
          
            
            Copy
            Copied
            Failed to copy