{"id":249463,"date":"2017-01-01T12:33:40","date_gmt":"2017-01-01T19:33:40","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=249463"},"modified":"2020-04-09T16:17:36","modified_gmt":"2020-04-09T23:17:36","slug":"indeterminate","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/selectors\/i\/indeterminate\/","title":{"rendered":":indeterminate"},"content":{"rendered":"

:indeterminate<\/code> is a pseudo-class selector in CSS named for a state that is neither checked nor unchecked. It’s that in-between state that we might consider the “Maybe” between “Yes” and “No” options. The state is not fully determined, hence the name: indeterminate.<\/p>\n

<\/p>\n

Indeterminate Checkboxes<\/h3>\n

The most common place we might see this in play is with checkboxes in a form:<\/p>\n

\"\"
Inderterminate as a third checkbox state<\/figcaption><\/figure>\n

There are a few quirky things about :indeterminate<\/code> when it comes to checkboxes that are worth noting before digging into how it can be selected in CSS.<\/p>\n

It cannot be set in the HTML<\/h4>\n

First off, there is no way to set a checkbox to an indeterminate state in HTML. In the opening example above, we were able to set the second checkbox to checked by explicitly saying so in the HTML.<\/p>\n

<!-- This is checked by default -->\n<input type=\"checkbox\" checked=\"\"><\/code><\/pre>\n
It is only logical to assume we could do the same with an indeterminate state:<\/p>\n
<!-- This does not work! -->\n<input type=\"checkbox\" indeterminate=\"\"><\/code><\/pre>\n
But, sadly, that is not the case so do not use that last example in your code.<\/p>\n
At the time of this writing, Javascript is the only means for setting an indeterminate state on a checkbox. One way to go about it is to select a specific checkbox by ID:<\/p>\n
var checkbox = document.getElementById(\"some-checkbox\");\ncheckbox.indeterminate = true;<\/code><\/pre>\n
The limitation of the example above is that the checkbox can never get back to an indeterminate state once it changes to another state. Instead, we can rotate between checked, unchecked and indeterminate states:<\/p>\n
<!-- Inline click handler, just for demo -->\n<input type=\"checkbox\" id=\"demo\" onclick=\"toggle(this)\"><\/code><\/pre>\n
function toggle(demo) {\n  if (demo.readOnly) demo.checked=demo.readOnly=false;\n  else if (!demo.checked) demo.readOnly=demo.indeterminate=true;\n}<\/code><\/pre>\n
See the Pen Rotate Checkbox States<\/a> by Geoff Graham (@geoffgraham<\/a>) on CodePen<\/a>.<\/p>\n
It is purely a visual state<\/h4>\n
A checkbox still only counts whether it has been checked or unchecked, regardless of whether we have activated an indeterminate state. In other words, indeterminate masks the actual value of the checkbox and does not count as a value of its own.<\/p>\n
It’s default appearance is inconsistent across browsers<\/h4>\n
Like numeric inputs<\/a>, an indeterminate state does not style consistently in every browser.<\/p>\n
\"\"
A comparison of how indeterminate renders across a few different browsers<\/figcaption><\/figure>\n
Overall, however, here is the support for indeterminate checkboxes.<\/p>\n
This browser support data is from Caniuse<\/a>, which has more detail. A number indicates that browser supports the feature at that version and up.<\/p><\/div>
Desktop<\/h4>
Chrome<\/span><\/th>Firefox<\/span><\/th>IE<\/span><\/th>Edge<\/span><\/th>Safari<\/span><\/th><\/tr><\/thead>
28<\/span><\/td>3.6<\/span><\/td>6<\/span><\/td>12<\/span><\/td>6<\/span><\/td><\/tr><\/table><\/div>
Mobile \/ Tablet<\/h4>
Android Chrome<\/span><\/th>Android Firefox<\/span><\/th>Android<\/span><\/th>iOS Safari<\/span><\/th><\/tr><\/thead>
124<\/span><\/td>125<\/span><\/td>4.4<\/span><\/td>12.2-12.5<\/span><\/td><\/tr><\/table><\/div><\/div>\n
Indeterminate Radio Buttons<\/h3>\n
:indeterminate<\/code> can apply to radio buttons at the group level, where the entire group is considered to be in an indeterminate state if no option is selected.<\/p>\n
See the Pen Inderminate Radio Buttons<\/a> by Geoff Graham (@geoffgraham<\/a>) on CodePen<\/a>.<\/p>\n
We ought to note that using :indeterminate<\/code> may not be the best choice<\/a> as far as user experience goes.<\/p>\n
Indeterminate Progress Bars<\/h3>\n
We can also apply :indeterminate<\/code> to the <progress><\/progress><\/code> element where no value has been explicitly set in the HTML. There’s no need for Javascript, but styling the <progress><\/progress><\/code> element is itself a tricky thing<\/a> that requires a lot of work and consideration for cross-browser consistency.<\/p>\n
See the Pen Indeterminate Progress Element<\/a> by Geoff Graham (@geoffgraham<\/a>) on CodePen<\/a>.<\/p>\n
Browser Support<\/h3>\n
This browser support data is from Caniuse<\/a>, which has more detail. A number indicates that browser supports the feature at that version and up.<\/p><\/div>
Desktop<\/h4>
Chrome<\/span><\/th>Firefox<\/span><\/th>IE<\/span><\/th>Edge<\/span><\/th>Safari<\/span><\/th><\/tr><\/thead>
39<\/span><\/td>51<\/span><\/td>11<\/span><\/td>79<\/span><\/td>10.1<\/span><\/td><\/tr><\/table><\/div>
Mobile \/ Tablet<\/h4>
Android Chrome<\/span><\/th>Android Firefox<\/span><\/th>Android<\/span><\/th>iOS Safari<\/span><\/th><\/tr><\/thead>
124<\/span><\/td>125<\/span><\/td>124<\/span><\/td>10.3<\/span><\/td><\/tr><\/table><\/div><\/div>\n
More Information<\/h3>\n