:不确定 | :indeterminate (Basic User Interface) - CSS 中文开发手册 - Break易站

  •   CSS 中文开发手册

    :不确定 | :indeterminate (Basic User Interface) - CSS 中文开发手册

    :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>

    结果

    规范

    Specification

    Status

    Comment

    HTML Living StandardThe definition of ':indeterminate' in that specification.

    Living Standard

    No change

    HTML5The definition of ':indeterminate' in that specification.

    Recommendation

    Defines the semantic regarding HTML and constraint validation.

    Selectors Level 4The definition of ':indeterminate' in that specification.

    Working Draft

    No change

    CSS Basic User Interface Module Level 3The definition of ':indeterminate' in that specification.

    Candidate Recommendation

    Defines the pseudo-class, but not the associated semantic.

    浏览器兼容性

    Feature

    Chrome

    Firefox (Gecko)

    Internet Explorer

    Edge

    Opera

    Safari

    type="checkbox"

    (Yes)

    3.6 (1.9.2)

    9.0

    (Yes)

    10.60 (2.6)

    3.0

    <progress>

    6.0

    6.0 (6.0)

    10

    (Yes)

    ?

    5.2

    type="radio"

    39.0

    51 (51)1

    No support

    No support2

    ?

    No support3

    Feature

    Android

    Firefox Mobile (Gecko)

    IE Mobile

    Edge

    Opera Mobile

    Safari Mobile

    type="checkbox"

    ?

    1.0 (1.9.2)

    ?

    (Yes)

    ?

    ?

    <progress>

    ?

    6.0 (6.0)

    ?

    (Yes)

    ?

    ?

    type="radio"

    39.0

    51.0 (51.0)1

    No support

    No support2

    ?

    No support3

  •   CSS 中文开发手册
    转载请保留页面地址:https://www.breakyizhan.com/css/32477.html

    posted on 2020-07-04 10:57  MrAit  阅读(177)  评论(0编辑  收藏  举报

    导航