:indeterminate

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015 .

The :indeterminate CSS pseudo-class represents any form element whose state is indeterminate, such as checkboxes that have been set to an indeterminate state with JavaScript, radio buttons which are members of a group in which all radio buttons are unchecked, and <progress> elements with no value attribute.

css 
/* Selects any <input> whose state is indeterminate */
input:indeterminate {
  background: lime;

Elements targeted by this selector are:


  • <input type="checkbox"> elements with the indeterminate property set to true.
    • 

  • <input type="radio"> elements with the same name value and none of them checked.
    • 

  • <progress> elements with no value, placing them in an indeterminate state.
    •

    Syntax

    css 
    :indeterminate {
  /* ... */

    Examples

    Checkbox & radio button

    This example applies special styles to the labels associated with indeterminate form fields.

    html 
    <fieldset>
  <legend>Checkbox</legend>
    <input type="checkbox" id="checkbox" />
    <label for="checkbox">This checkbox label starts out lime.</label>
</fieldset>
<fieldset>
  <legend>Radio</legend>
    <input type="radio" id="radio1" name="radioButton" value="val1" />
    <label for="radio1">First radio label starts out lime.</label>
    <input type="radio" id="radio2" name="radioButton" value="val2" />
    <label for="radio2">Second radio label also starts out lime.</label>
</fieldset>

    css
    input:indeterminate + label {
  background: lime;