:indeterminate CSS Pseudo Class

Description

The :indeterminate pseudo-class sets the style for switches when they are in an undefined state. For example, if no switch is checked, then they are in the indicated state. In reality, the style applies only to elements for which the DOM attribute :indeterminate via JavaScript is set to true . Also, this pseudo-class is used by some browsers for the <progress> element.

Syntax

element:indeterminate { … }

Example

HTML

<div>

  <input type="checkbox" id="checkbox">

  <label for="checkbox">This label starts out green.</label>

</div>

<br>

<p>Progress bar without a value; i.e. in an indeterminate state.</p>

<progress>

<script>

var inputs = document.getElementsByTagName("input");



for (var i = 0; i < inputs.length; i++) {

  inputs[i].indeterminate = true;

}

</script>

CSS

input:indeterminate + label {

   background: green;

}

progress {

   margin: 4px;

}

progress:indeterminate {

   border: 1px solid green;

}

Result

Browser Support

Desktop

10	12	1	2	9	3

Tablets / Mobile

≤37	18	4	10.1	1	1.0

Last updated by CSSPortal on: 25th November 2019

Share this Page

If you have enjoyed using CSSPortal, please consider sharing this page with other users, just click on your preferred social media link or copy the webpage from the link below.

URL

Menu