:read-only没生效是因为元素未真实进入只读状态，需检查三件事：dom中是否有readonly属性、元素是否为支持类型（input文本类或textarea）、浏览器是否兼容；它不响应js赋值，仅匹配html属性。

为什么:read-only没生效？先查这三件事

不是选择器写错了，而是元素根本没进入:read-only状态。它只响应 HTML 属性，不认 JS 属性或逻辑禁用。

• 打开 DevTools → Elements 面板，确认目标 <input> 或 <textarea></textarea> 标签上**真有 readonly 字样**（哪怕没值，readonly="" 也行）
• <select></select>、<button></button>、<input type="hidden">、<input type="checkbox"> 全都不支持 :read-only —— 写了也白搭
• 别用 el.readOnly = true 动态赋值就完事；得同步调用 el.setAttribute('readonly', '')，否则 SSR 或初始渲染可能漏样式

:read-only 和 [readonly] 到底该用哪个？

两者都能选中只读输入框，但机制和兼容性不同，不能混着当一回事用。

javascript-pro

专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发

下载

• input[readonly] 是属性选择器：只要 HTML 里写了 readonly 就匹配，IE8+ 全支持，行为确定
• input:read-only 是伪类：匹配“当前真实只读状态”，JS 改 el.readOnly = false 后样式立刻消失，但 Firefox 要写 input:-moz-read-only 才能生效
• 如果项目要兼容旧版 Firefox 或 IE，优先用 [readonly]；如果只跑现代浏览器且需要 JS 动态响应，再考虑 :read-only

只读样式怎么写才不和 :disabled 搞混？

用户一眼分不清“只是看”和“彻底锁死”，是表单体验最常翻车的地方。

• :read-only 元素仍可聚焦、可双击选中、可复制文本、会随表单提交 —— 所以背景别太灰（比如用 background-color: #f9fafb），文字别降权（保持 color: #111827）
• 加 cursor: default 比 cursor: not-allowed 更准确：前者表示“这是内容，点不动”，后者暗示“出错了/被禁用了”
• 千万别让一个元素同时带 readonly 和 disabled —— :disabled 样式优先级更高，且语义冲突：一个提交数据，一个不提交

哪些地方容易被忽略？

真正卡住人的不是语法，是边界行为和隐含假设。

• :read-only 不拦截任何事件：用户照常能右键粘贴、Ctrl+A 全选、按 Tab 键停在上面 —— 要禁粘贴得自己监听 paste 并 preventDefault()
• <input type="number"> 在 Safari 15.4 之前有 bug，:read-only 可能不触发，得 fallback 到 [readonly]
• Vue/React 里用 :readonly 或 readOnly 绑定，务必检查最终渲染的 DOM 是否真有 readonly 属性，而不是只改了 JS 属性

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！