:indeterminate
Quick Summary for :indeterminate
:indeterminate CSS pseudo-class represents any form element whose state is indeterminate, such as checkboxes which have their HTML indeterminate attribute set to true, radio buttons which are members of a group in which all radio buttons are unchecked, and indeterminate <progress> elements.
Code Usage for :indeterminate
<pre class="brush: css notranslate"><code><span class="token comment">/ Selects any <input> whose state is indeterminate /</span> <span class="token selector">input:indeterminate</span> <span class="token punctuation">{</span> <span class="token property">background</span><span class="token punctuation">:</span> lime<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre>
More Details for :indeterminate
:indeterminate
The :indeterminate CSS pseudo-class represents any form element whose state is indeterminate, such as checkboxes which have their HTML indeterminate attribute set to true, radio buttons which are members of a group in which all radio buttons are unchecked, and indeterminate <progress> elements.
/* Selects any <input> whose state is indeterminate */ input:indeterminate { background: lime; } Elements targeted by this selector are:
<input type="checkbox"> elements whose indeterminate property is set to true by JavaScript <input type="radio"> elements, when all radio buttons with the same name value in the form are unchecked <progress> elements in an indeterminate state Syntax
:indeterminate
Examples
Checkbox & radio button
This example applies special styles to the labels associated with indeterminate form fields.
HTML<fieldset> <legend>Checkbox</legend> <div> <input type="checkbox" id="checkbox"> <label for="checkbox">This checkbox label starts out lime.</label> </div> </fieldset> <fieldset> <legend>Radio</legend> <div> <input type="radio" id="radio1" name="radioButton"> <label for="radio1">First radio label starts out lime.</label> </div> <div> <input type="radio" id="radio2" name="radioButton"> <label for="radio2">Second radio label also starts out lime.</label> </div> </fieldset> input:indeterminate + label { background: lime; } const inputs = document.getElementsByTagName("input"); for (let i = 0; i < inputs.length; i++) { inputs[i].indeterminate = true; } Progress bar
HTML<progress></progress> progress { margin: 4px; } progress:indeterminate { width:80vw; height:20px; } Specifications
| Specification |
|---|
| HTML Standard # selector-indeterminate |
| Selectors Level 4 # indeterminate |
See also
Web forms — Working with user data Styling web forms The<input type="checkbox"> element's indeterminate attribute <input> and the HTMLInputElement interface which implements it. The :checked CSS selector lets you style checkboxes based on whether they're checked or not Last modified: Jan 3, 2022, by MDN contributors
Select your preferred language English (US)DeutschEspañolFrançais日本語Русский中文 (简体) Change languageAdd Comment
Other Items in CSS
Related Search Terms
Other Categories in CSS
