textarea:read-only没生效是因为dom中缺少readonly属性；必须用setattribute('readonly', '')或html直接写，仅js赋值readonly=true无效，且仅原生textarea支持该伪类。

textarea:read-only 为什么没生效？先看 DOM 里有没有 readonly 属性

浏览器只认 HTML 中真实存在的 readonly 属性，不是 JS 设置的 el.readOnly = true。哪怕你用 JS 把属性设为 true，若没写进 DOM，textarea:read-only 就不会触发。

✅ 正确做法：el.setAttribute('readonly', '') 或直接在 HTML 里写 <textarea readonly></textarea>
❌ 错误写法：el.readOnly = true（DOM 里没出现 readonly 字样）
⚠️ 注意：Vue/React 中用 v-bind:readonly 或 readOnly={true} 通常能渲染出属性，但得打开 DevTools → Elements 面板确认最终 HTML 确实带 readonly

哪些 textarea 能匹配 :read-only？别试错方向

:read-only 只对原生支持 readonly 的 <textarea></textarea> 生效，且不关心内容是否真被锁住——只看属性是否存在、元素类型是否合规。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• <textarea readonly></textarea> ✅ 完全匹配
• <textarea readonly></textarea> ✅ 依然匹配（HTML 布尔属性，有即生效）
• <textarea disabled readonly></textarea> ❌ 不匹配 :read-only，只走 :disabled
• <div contenteditable="false"> ❌ 不是 <code><textarea></textarea>，伪类无效
• <textarea readonly></textarea> 在 Shadow DOM 内部 ❌ 默认不穿透，需用 ::slotted(textarea:read-only)

常见样式需求怎么写？别漏掉关键行为控制

textarea:read-only 只管样式，不改交互。用户仍可聚焦、选中、复制、右键粘贴——这些都得额外处理。

• 禁用文本选择：user-select: none；想允许复制则用 user-select: text
• 光标提示只读：cursor: not-allowed 或 cursor: default（后者更友好，保留可点击感）
• 阻止粘贴：textarea:read-only { ... } + 监听 <code>paste 事件并 event.preventDefault()
• 跳过 Tab 焦点：tabindex="-1"（否则键盘用户会停在这里）
• 背景/边框示例：textarea:read-only { background: #f9f9f9; border-color: #ddd; color: #666; }

兼容性差怎么办？别硬扛 IE 和旧 Safari

:read-only 在 Chrome、Edge（Chromium）、现代 Safari（≥15.4/macOS 12.3）和 Firefox（需 :-moz-read-only）中可用，但 IE 全系不支持，Safari ≤15.3 对 input[type="number"] 还有漏匹配 bug——<textarea></textarea> 倒是相对稳，但保险起见仍建议降级。

• 降级首选：textarea[readonly]，所有浏览器都支持，行为确定
• Firefox 兜底写法：textarea:read-only, textarea:-moz-read-only
• 不要依赖它做功能开关——它只是视觉钩子；禁用输入逻辑必须靠 HTML readonly 属性或 JS 监听
• SSR 场景下，务必确保初始 HTML 字符串里就含 readonly 属性，否则首屏样式丢失
真正难处理的不是写法，而是“只读”状态在 JS 动态切换时，DOM 属性、CSS 伪类、焦点流、表单提交行为这四者是否同步。漏掉任意一环，用户就会遇到“看着是只读，却能粘贴”或“点了没反应，但其实焦点卡住了”这类问题。