html - input type="button" 元素是只读的吗？Firefox 似乎是这么认为的：

Question

鉴于 html

input {
  color: blue
}

input:read-only {
  color: red
}

input:-moz-read-only {
  color: red
}

<input type="text" value="normal">
<input type="button" value="normal">
<input type="text" readonly="true" value="readonly">
<input type="button" readonly value="readonly">

Firefox（我测试过 77 和 78）将元素显示为：

blue, red, red, red (not-readonly, readonly, readonly, readonly)

Chrome 和 edgium 显示：

蓝色，蓝色，红色，蓝色（非，非，只读，非）。

Mozilla（https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly）说

注意：只有文本控件可以设为只读，因为对于其他控件（例如复选框和按钮），只读和禁用之间没有有用的区别，因此 readonly 属性不适用。

然而，Firefox 清楚地将所有带有按钮类型的输入解释为只读（至少对于 CSS）。

这个对吗？Chrome 的行为与我所期望的基于 mozilla 页面的 firefox 一样 - readonly 属性，即使已应用，也会被忽略。

我有一个 css 问题，我敢说我可以通过在 CSS 中指定类型来解决，但我不确定这是 Firefox 错误还是怪癖。

Answer 1

评论正确地指出，这些元素现在在很大程度上是多余的——但是，正如我所说，我无法控制这些元素本身。

所以我本可以使用 js 来更改元素本身，但是，我认为这可能有点过头了。我也遇到过这个问题 - 可访问性验证工具（如总验证器）倾向于读取原始源代码，并且可以在初始而不是未修改的代码上标记错误。

我刚刚改进了 CSS 本身，从

input:read-only

至

input:read-only:not([type=button]):not([type=submit])

在我看来，这仍然是 Firefox 的不寻常行为，但也许只是我。