为何CSS :read-only伪类会被应用到未设置readonly属性的元素上

这是符合CSS标准的正常行为，核心原因是:read-only的匹配范围远不止显式设置readonly属性的表单元素：所有无法被用户编辑内容的元素，都会命中该伪类。

<input type="button" />匹配逻辑 #

type为button、submit、reset、image的input元素本身就不支持用户输入内容，天然不属于可读写元素，因此默认就会匹配:read-only，不会匹配:read-write，不属于浏览器兼容问题。

文档描述的认知误区 #

现有公开文档的常见描述都只覆盖了部分场景，没有说明完整规则：

• W3Schools的相关描述是简化的常见场景说明，没有覆盖非输入类表单元素的情况
• MDN的相关描述有明确前提：仅适用于支持readonly属性的input元素，而按钮类型的input本身就不支持readonly属性，因此不适用该规则。

完整匹配规则 #

符合以下任意条件的元素会匹配:read-write，其余所有元素默认匹配:read-only：

• 属于支持用户输入的表单元素（如type="text"的input、textarea等），且未设置disabled、readonly属性
• 普通元素设置了contenteditable="true"属性

内容的提问来源于stack exchange，提问作者xsrf