怎么用CSS3的:read-only伪类区分只读与可编辑文本框？-css教程-PHP中文网

:read-only伪类仅对含readonly属性的input（非hidden）和textarea生效，不响应disabled或JS设置；Safari≤15.3对number类型有漏匹配bug，select和button完全不支持。

怎么用css3的:read-only伪类区分只读与可编辑文本框？

:read-only 伪类只对真实写了 readonly 属性的（非 type="hidden"）和生效，不响应 disabled、contenteditable="false" 或仅 JS 设置的 el.readOnly = true；Safari ≤15.3 对 type="number" 有漏匹配 bug，和完全不支持。

怎么确认 :read-only 真生效了？

浏览器只检查 DOM 中是否存在 readonly 这个 HTML 属性，不关心 JS 是否锁了逻辑。打开 DevTools → Elements 面板，看目标元素标签上有没有 readonly 字样（哪怕写成 readonly="" 或 readonly="anything" 都行）。

el.setAttribute('readonly', '') 是最稳妥的写法，确保属性真实落进 DOM
el.readOnly = true 多数浏览器能识别，但 SSR 或首屏渲染可能漏掉样式
直接写在 HTML 里最可靠——布尔属性只要出现就生效

哪些元素能被 :read-only 匹配？别试错方向

:read-only 只对原生支持 readonly 的文本类表单控件生效：

、、 ✅（注意：Safari ≤15.3 对 type="number" 有漏匹配 bug）
✅
❌ 不支持，HTML 规范不承认
❌ 不是表单控件，伪类无效
❌ 即使加了 readonly，也不在匹配范围内


特别注意： 会走 :disabled，:read-only 完全不生效——两者语义冲突，不能混用。
只读框的样式怎么写才不误导用户？
关键不是“灰掉”，而是让用户一眼分清“这是内容，不是被禁用”：

											
												
												
													CSS
													CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。
												
												下载
												
											
										

背景别太暗：background-color: #f9fafb（比 :disabled 的 #f4f4f5 略亮）
文字保持原色：color: #111827（不降权，强调数据真实）
光标设为 cursor: default，不是 not-allowed（后者暗示错误或禁用）
允许复制：user-select: text；如需禁止，则加 user-select: none

边框保留结构感：border: 1px solid #d1d5db，而非 border: none


示例 CSS：
input:read-only, textarea:read-only {
  background-color: #f9fafb;
  border: 1px solid #d1d5db;
  color: #111827;
  cursor: default;
  user-select: text;
}
容易被忽略的边界行为
真正卡住人的不是语法，是隐含假设：


:read-only 不拦截任何事件：用户仍可右键粘贴、Ctrl+A 全选、Tab 键停在上面——要禁粘贴得自己监听 paste 并 preventDefault()


 在 Safari 15.4 之前有 bug，:read-only 可能不触发，得 fallback 到 [readonly]

只读框仍会接收焦点，查看模式下若不处理 tabindex="-1"，键盘用户会意外停在这里

最常被跳过的一步：没检查最终 DOM 是否真带 readonly 属性——所有样式问题，八成出在这儿。