textarea:read-only没高亮是因为DOM中缺少readonly属性；必须用setAttribute('readonly', '')或HTML直接写，仅JS赋值readOnly=true无效，且仅原生textarea支持该伪类。
textarea:read-only 为什么没高亮？先看 DOM 里有没有 readonly 属性
浏览器只认 HTML 中真实存在的 readonly 属性，不是 JS 设置的 el.readOnly = true。哪怕你在控制台执行了 input.readOnly = true，若 DevTools → Elements 面板里没看到 readonly 字样，textarea:read-only 就不会触发。
✅ 正确写法：<textarea readonly></textarea> 或运行 el.setAttribute('readonly', '')
❌ 错误写法：el.readOnly = true（DOM 属性未写入）
Vue/React 中用 v-bind:readonly 或 readOnly={true} 通常能渲染出属性，但务必打开 Elements 面板确认最终 HTML 确实带 readonly —— 这是唯一判断依据。
哪些元素能被 :read-only 匹配到？别试错方向
:read-only 只对原生支持 readonly 的文本类表单控件生效：
-
<input type="text">、<input type="email">、<input type="number">✅（注意：Safari ≤15.3 对type="number"有漏匹配 bug） -
<textarea></textarea>✅ -
<select readonly></select>❌ 不支持，HTML 规范不承认 <div contenteditable="false"> ❌ 不是表单控件，伪类无效 <li> <code><input type="checkbox">❌ 即使加了readonly，也不在匹配范围内- 边框保留结构感：
border: 1px solid #d1d5db（别用border: none，否则和禁用状态混淆） - 文字颜色保持可读性：
color: #111827（不降权，强调这是真实数据，不是被锁住） - 光标提示只读：
cursor: default（比not-allowed更友好，保留点击感） - 允许复制提升体验：
user-select: text（默认是text，但显式声明更稳妥） - 禁用 Tab 焦点（查看模式下常用）：
tabindex="-1"（否则键盘用户会停在这里）
特别注意：<input readonly disabled> 会走 :disabled，:read-only 完全不生效 —— 两者语义冲突，不能混用。
立即学习“前端免费学习笔记（深入）”；
高亮样式怎么写才真正“高亮”？别只改背景色
只设 background-color: #f0f0f0 很难达到“一眼识别不可编辑”的效果。要强化视觉区分，建议组合以下几项：
示例 CSS：
textarea:read-only {
background-color: #f9fafb;
border: 1px solid #d1d5db;
color: #111827;
cursor: default;
user-select: text;
}
兼容性差怎么办？别硬扛 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相对稳定） - Firefox 必须显式写
input:-moz-read-only，否则样式丢失
降级首选：textarea[readonly] —— 所有浏览器都支持，行为确定，且权重与 :read-only 相同（伪类 > 属性选择器），无需额外 hack。
真正容易被忽略的是：:read-only 是纯样式钩子，它不阻止粘贴、不拦截焦点、不改变提交行为。高亮只是体验提示，后端必须校验字段是否被篡改。
