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 就不会触发。

✅ 正确写法： 或运行 el.setAttribute('readonly', '')
❌ 错误写法：el.readOnly = true（DOM 属性未写入）

Vue/React 中用 v-bind:readonly 或 readOnly={true} 通常能渲染出属性，但务必打开 Elements 面板确认最终 HTML 确实带 readonly —— 这是唯一判断依据。

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

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

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

特别注意： 会走 :disabled，:read-only 完全不生效 —— 两者语义冲突，不能混用。

高亮样式怎么写才真正“高亮”？别只改背景色

只设 background-color: #f0f0f0 很难达到“一眼识别不可编辑”的效果。要强化视觉区分，建议组合以下几项：


CSS婚礼策划服务机构宣传网站模板
CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。
下载
• 边框保留结构感：border: 1px solid #d1d5db（别用 border: none，否则和禁用状态混淆）
• 文字颜色保持可读性：color: #111827（不降权，强调这是真实数据，不是被锁住）
• 光标提示只读：cursor: default（比 not-allowed 更友好，保留点击感）
• 允许复制提升体验：user-select: text（默认是 text，但显式声明更稳妥）
• 禁用 Tab 焦点（查看模式下常用）：tabindex="-1"（否则键盘用户会停在这里）

示例 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 是纯样式钩子，它不阻止粘贴、不拦截焦点、不改变提交行为。高亮只是体验提示，后端必须校验字段是否被篡改。