html之浏览器中预定义了多少种单选按钮状态

kerrycode 阅读:18 2023-09-15 19:09:47 评论:0

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

这些状态及其组合是什么?

请您参考如下方法:

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

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

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

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

  • :悬停
  • :活跃
  • :专注

它们可以任意组合使用或根本不使用。它们有 8 种可能的组合。将其与 4 个启用-禁用、选中-未选中对组合,我们得到 32 种可能的状态,可以在以下思维导图中找到(缩放以查看全尺寸): 每一次pass从checked-unchecked节点算起至少包含两个节点就是一个state,例如:

  • 检查禁用,
  • 选中启用焦点,
  • unchecked-enabled-hover-active.

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


标签:程序员
声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

关注我们

一个IT知识分享的公众号