不确定单选按钮

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您的旅程的每个阶段提供云产品。从 免费赠送的 200 美元信用额度 开始!

有一个伪类选择器,:indeterminate,它的作用是选择既未选中(具有属性“checked”)也未取消选中(没有)的单选按钮输入。这是一个 CSS3 选择器,可能是对 HTML5 规范 的响应,该规范明确允许单选按钮处于这种状态

如果单选按钮组中的任何单选按钮在插入文档时都没有被选中,那么它们在界面中将最初都未被选中,直到它们中的一个被选中(由用户或脚本)。

这一切有什么意义? 好吧……为什么明确允许这种糟糕的 UI?


没有选择

在上一周的评论中,Lee Kowalkowski 对此进行了很好的总结

在我看来,这是糟糕的 UI。最受欢迎的选项应该被选中。如果选择不选择是有效的,那么单选按钮组不适合,因为用户无法轻松地将组恢复到其不确定的状态。

值得重复:用户无法轻松地将组恢复到其不确定的状态。

HTML4 规范 更有意义

始终,单选按钮集中只有一个单选按钮被选中。如果单选按钮集中的 <INPUT> 元素没有一个指定 ‘CHECKED’,那么用户代理必须最初选中该集中第一个单选按钮。

由于用户代理行为不同,作者应该确保在每个单选按钮集中最初都“打开”一个。

那里的第二部分,用简单的英语来说:由于我们知道没有浏览器真正遵循这一规范,因此我们添加了这个特殊的说明来提醒作者将其掌握在自己手中。

在我看来,我们应该恢复到 HTML4 规范,但浏览器应该实际尊重它,通过强制在任何时候至少一个单选按钮被选中(每个组)。这样一来,:indeterminate 伪类就没什么用了。

请记住,单选按钮和下拉列表本质上是相同的(只能从多个选项中选择一个)。所以,如果您需要“未选中”状态,也许 <select> 带有“选择”的默认选项可以为您解决问题。