为什么 Chrome 将 input[type=submit] 视为只读？（不再工作）

Question

在过去的几天里，我在 Chrome 中遇到了一个问题，表单上的提交按钮不再可点击。我有以下 HTML：

<input type="submit" value="Save" />

而且，事实证明，以下 SASS 意外地影响了按钮，导致它们不再工作：

input:read-only {
  pointer-events: none;
}

为什么会发生这种情况？我正在运行 Chrome“版本 92.0.4515.107（官方版本）（64 位）”。这是怎么回事？

Answer 1

事实证明，在 Chrome 92.0.4515.107 中，引入了一项更改来处理

<input type="submit" value="Save" />

作为只读输入。因此选择器input:read-only现在在结果中包含此提交按钮。如果碰巧您的样式或 Javascript 会影响这些元素，并且您还使用提交类型的输入，那么您最近可能会遇到一些新的令人头疼的问题。

将样式选择器更改为input:read-only:not([type=submit])以消除该问题。

我的样式示例是 SASS。如果这些在纯 CSS 中不起作用，我们深表歉意。我们鼓励任何了解如何编写纯 CSS 的人适当更新我的答案或在下面发表评论（谢谢！）。