:read-only伪类仅匹配显式设置readonly属性的input/textarea，不匹配disabled元素或contenteditable="false"元素；需html中明确写readonly属性，配合border、背景色、光标等样式实现查看模式视觉优化。
:read-only 伪类能准确选中 readonly 属性为 true 的 <input> 和 <textarea></textarea>，但它**不会匹配 disabled 元素**，也不会匹配没有显式设置 readonly 但实际不可编辑的元素（比如 contenteditable="false"）。这点必须先厘清，否则样式会漏掉或错配。
只读输入框的正确标记方式
要让 :read-only 生效，HTML 中必须显式写 readonly 属性（布尔属性，无需值）：
<input type="text" value="订单号：ORD-7890" readonly><textarea readonly>客户备注内容…</textarea>
常见错误包括：
- 只加
disabled—— 这时:read-only完全不触发，得用:disabled - 用 JavaScript 动态设
element.readOnly = true但没同步写入 HTML 属性 —— 大多数浏览器仍识别，但 SSR 或初始渲染可能不一致，建议同时写setAttribute('readonly', '') - 对
<div contenteditable="false"> 误用 <code>:read-only—— 它不适用，得靠自定义 class 或[contenteditable="false"]表单查看模式下的典型视觉优化
查看模式下，目标是让用户一眼识别“这是静态内容，非禁用状态”，避免和
:disabled混淆。推荐组合策略：- 移除默认边框阴影：
border: 1px solid #d1d5db;（而不是border: none，否则失去结构感） - 背景设为浅灰但保留可读性：
background-color: #f9fafb;（比disabled的#f4f4f5略亮） - 文字颜色保持
color: #111827;（不降权，强调“这是真实数据，不是被锁住”） - 光标设为默认箭头：
cursor: default;，点击无反应更直观 - 可选：加
user-select: text;允许复制，提升查看体验
兼容性与边界情况处理
:read-only在所有现代浏览器（Chrome 14+、Firefox 17+、Safari 3.1+、Edge 12+）都支持，但要注意：-
<select></select>元素永远不匹配:read-only，即使加了readonly属性（HTML 规范不支持），需改用<output></output>或只读<span></span>+ 隐藏原select -
<input type="checkbox">和<input type="radio">加readonly后仍可被聚焦，但无法切换；:read-only会命中，但视觉上建议统一用pointer-events: none;配合opacity: 0.8;更稳妥 - 若表单有混合状态（部分字段只读、部分可编辑），务必测试焦点管理 ——
readonly输入框仍可获得焦点，Tab 键会停在上面，这有时不符合查看模式预期，需配合tabindex="-1"手动跳过
真正难处理的是「逻辑只读但未标记」的字段，比如后端返回的字段没带
readonly标识，前端靠权限判断是否可编辑。这种场景下，硬套:read-only会失效，必须用 JS 注入 class 或服务端渲染时输出readonly属性 —— 样式只是最后一环，数据驱动才是关键。 - 移除默认边框阴影：
