百科狗-知识改变命运!
--

:indeterminate - 选择处于不确定状态的表单元素 - UI元素状态伪类选择器

梵高1年前 (2023-11-21)阅读数 26#技术干货
文章标签不确定

:indeterminate

版本:CSS3

:indeterminate是一个CSS 伪类选择器,是用于选择处于不确定状态的表单元素。例如,元素可以在选中状态和未选中状态之间切换,但有时处于不确定状态,既不选中也不取消选中。类似地,还有HTML5 标签,当完成的百分比未知时,进度条可以处于不确定状态。

语法:

E:indeterminate{sRules}

:indeterminate伪类选择器可以在以下元素中使用:

  1. 复选按钮(),其indeterminate属性设置为true
  2. 单选按钮(),在表单中拥有相同name值的单选按钮组中未被选中时单选按钮。
  3. 进度条元素()没有value属性的。progress标签元素是一个HTML5元素,用于表示任务的完成进度。
  4. 可以说元素的不确定状态是一种视觉状态,下面是复选框的三种状态:已选中,未选中和不确定:

    注:元素的不确定状态只能通过JavaScript来动态设置。上面提到的indeterminate属性只能和JavaScript一起应用,这意味着不能像下面这样通过HTML将元素的状态设置为不确定:

     

    要将元素设置为不确定状态,您只能通过JavaScript执行此操作。例如,如果页面中有一组复选框,则以下行将选择第一行并将其状态更改为不确定状态:

    document.getElementsByTagName("input")[0].indeterminate = true;
    


    /* selects any  whose state is indeterminate */
    input:indeterminate {
      background: lime;
    }
    

    根据上述例子(选择器)选中的元素是:

  • 元素,其indeterminate属性被 JavaScript设置为true
  • 元素,表单中拥有相同name值的所有单选按钮都未被选中时。
  • 处于不确定状态的元素

浏览器支持

IE10+以及新版浏览器都支持:indeterminate
IE9、IE8以及早期IE浏览器都不支持:indeterminate

例子

//CSS
input, span {
  background: red;
}

:indeterminate, :indeterminate + label {
  background: lime;
}

//HTML 
background should be green
background should be green
//JavaScript var inputs = document.getelementsbytagname("input"); for(var i = 0; i
//CSS

progress {
  margin: 4px;
}

progress:indeterminate {
  opacity: 0.5;
  background-color: lightgray;
  box-shadow: 0 0 2px 1px red;
}

//HTML 

嵌套的复选框

将复选框的状态(和样式)设置为不确定可能有用的一个用例是,当我们嵌套复选框时,让一个复选框具有了子复选框。通常是在提供多种选择的用户界面中看到这种情况,并且某些选项具有“子选项”。通常,设置“父”复选框,以便它可用于切换其所有子复选框的样式- 检查它将检查所有子项,取消选中它将取消选中所有子项。取消选中它将允许用户检查子复选框中的一些选项,同时保留其他选项未选中。因此,使用此概念,可以检查复选框是否选中了所有后代复选框,如果未选中所有后代复选框,则该“父”复选框的状态为不确定,例如:

一组嵌套的复选框中,当我们选中一个子选项时,“父”复选框的状态为“不确定”

当我们选择2个子选项时,“父”复选框的状态还是为“不确定”

只有,当所有子选项都被选中是,父”复选框的状态才会为“选中”

:indeterminate - 选择处于不确定状态的表单元素 - UI元素状态伪类选择器

如果复选框的标签处于不确定状态,则父复选框标签的颜色将变为deepPink。

//HTML 
  • 选择喜欢的水果
    • 苹果、香蕉、橘子
    • 柚子、橙子、西瓜
    • 芒果、火龙果、哈密瓜
//CSS ul { list-style: none; } .container { margin: 40px auto; max-width: 700px; } li { margin-top: 1em; } label { font-weight: bold; } input[type="checkbox"]:indeterminate + label { color: deepPink; } //JS var checkboxes = document.querySelectorAll('input.subOption'), checkall = document.getElementById('option'); for(var i=0; i 0; checkall.indeterminate = checkedCount > 0 && checkedCount

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com

免责声明:我们致力于保护作者版权,注重分享,当前被刊用文章因无法核实真实出处,未能及时与作者取得联系,或有版权异议的,请联系管理员,我们会立即处理! 部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理!邮箱:344225443@qq.com)

图片声明:本站部分配图来自网络。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!

内容声明:本文中引用的各种信息及资料(包括但不限于文字、数据、图表及超链接等)均来源于该信息及资料的相关主体(包括但不限于公司、媒体、协会等机构)的官方网站或公开发表的信息。部分内容参考包括:(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供参考使用,不准确地方联系删除处理!本站为非盈利性质站点,本着为中国教育事业出一份力,发布内容不收取任何费用也不接任何广告!)