html - 输入类型 ="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)将元素显示为:
蓝色、红色、红色、红色(非只读、只读、只读、只读)
Chrome 和 edgium 显示:
蓝色，蓝色，红色，蓝色(不是，不是，只读，不是)。
Mozilla ( https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly ) 说

Note: Only text controls can be made read-only, since for other controls (such as checkboxes and buttons) there is no useful distinction between being read-only and being disabled, so the readonly attribute does not apply.

然而，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 的这种行为有点不寻常，但也许只是我自己。