CSS

:不确定 | :indeterminate

:indeterminate

:indeterminate 表示状态不确定的表单元素。

/* Selects any <input>, but only when its state is indeterminate */ input:indeterminate { background: lime; }

这包括:

  • <input type="checkbox"> 元素,其 indeterminate 属性被 JavaScript设置为 true 。

  • <input type="radio"> 元素, 表单中拥有相同 name值的所有单选按钮都未被选中时。

  • 处于不确定状态的 <progress> 元素。

语法

:indeterminate

示例

复选框和单选按钮

CSS

input, span { background: red; } :indeterminate, :indeterminate + label { background: lime; }

HTML

<div> <input type="checkbox" id="checkbox"> <label for="checkbox">Background should be green</label> </div> <div> <input type="radio" id="radio"> <label for="radio">Background should be green</label> </div>

JavaScript

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

进度元素

CSS

:indeterminate { opacity: 0.5; }

HTML

<progress>

结果

规范

SpecificationStatusComment
HTML Living StandardThe definition of ':indeterminate' in that specification.Living StandardNo change
HTML5The definition of ':indeterminate' in that specification.RecommendationDefines the semantic regarding HTML and constraint validation.
Selectors Level 4The definition of ':indeterminate' in that specification.Working DraftNo change
CSS Basic User Interface Module Level 3The definition of ':indeterminate' in that specification.Candidate RecommendationDefines the pseudo-class, but not the associated semantic.

浏览器兼容性

FeatureChromeFirefox (Gecko)Internet ExplorerEdgeOperaSafari
type="checkbox"(Yes)3.6 (1.9.2)9.0(Yes)10.60 (2.6)3.0
<progress>6.06.0 (6.0)10(Yes)?5.2
type="radio"39.051 (51)1No supportNo support2?No support3

FeatureAndroidFirefox Mobile (Gecko)IE MobileEdgeOpera MobileSafari Mobile
type="checkbox"?1.0 (1.9.2)?(Yes)??
<progress>?6.0 (6.0)?(Yes)??
type="radio"39.051.0 (51.0)1No supportNo support2?No support3