浏览器中预定义了多少个单选按钮状态?

时间:2017-02-19 11:08:35

标签: html css radio-button pseudo-class states

我面临着开发自定义单选按钮的任务。为了避免样式问题,我想知道所有可能的预定义状态(如已检查,活动和其他状态),以便为他们制定CSS规则,以确保我不会有一些意想不到的样式。

这些州及其组合是什么?

1 个答案:

答案 0 :(得分:2)

在W3C Selectors Level 3 document中,有以下状态伪类可应用于无线电元素:

  • :检查
  • :启用
  • :禁用

请记住,无法检查无线电元素,有必要提及存在未经检查的状态。这些状态成对出现,每对中的一个状态始终存在。这样我们现在可以获得4种状态(可以在下面的思维导图中找到)。

确实存在可以应用于html radio元素的动态伪类:

  • :悬停
  • :活性
  • :焦点

它们可以任意组合使用或根本不使用。它们有8种可能的组合。将此与4个启用禁用,已选中未选中对组合在一起,我们可以在下面的思维导图中找到32个可能的声明(缩放以查看完整大小): Radio button possible states 包含至少两个从checked-unchecked节点计数的节点的每个pass都是一个状态,例如:

  • 签禁用,
  • 检查启用对焦,
  • 启用选中-悬停活性。

在每条已启用的路径附近,都会显示单选按钮状态的图片,因为它现在在MacOS Sierra的Chrome浏览器中实现。每个禁用路径只有一个图片 - 对于其他禁用状态,它们都是相同的。总共有10张图片代表每个州。数字用于方便。