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

【问题标题】：Are input type="button" elements readonly? Firefox seems to think so:input type="button" 元素是只读的吗？ Firefox 似乎是这么认为的：
【发布时间】：2020-10-15 16:07:03
【问题描述】：

给定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) 说

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

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

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

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

【问题讨论】：

您使用<input type="button"> 而不是<button> 有什么原因吗？ <button> 元素在各方面都非常出色。
“我不确定这是 Firefox 的错误还是怪癖。” - 我的钱是由于 HTML + CSS 规范对此不精确而引起的怪癖。也就是说，无论如何，没有人应该使用<input type="button">，所以我认为这是一个没有实际意义的问题。
FWIW，Safari 的行为与 Firefox 相同……
确实是的——当然应该是<button>——它是我们使用的专有高等教育软件，它正在生成html。所以我没有（容易）控制元素本身。
<input type="submit"> 的结果相同，这是在表单中使用的正确元素。

标签： html css firefox button

【解决方案1】：

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

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

我刚刚完善了 CSS 本身，来自

input:read-only

到

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

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

【讨论】：