怎么用现代CSS3伪类:read-only控制只读表单样式？-css教程-PHP中文网

textarea:read-only没生效是因为DOM中缺失readonly属性；必须用setAttribute('readonly', '')或HTML直接写readonly，而非JS赋值el.readOnly = true，且仅textarea和部分input类型支持该伪类。

怎么用现代css3伪类:read-only控制只读表单样式？

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

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

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

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

:read-only 只对原生支持 readonly 的（type 不为 range、checkbox、radio、hidden）和生效，且不关心内容是否真被锁住——只看属性是否存在、元素类型是否合规。

✅ 完全匹配
✅ 依然匹配（HTML 布尔属性，有即生效）
❌ 不匹配 :read-only，只走 :disabled
❌ 不是表单控件，伪类无效
❌ HTML 规范不支持，浏览器忽略




:read-only 只管样式，不改交互——这些行为得手动补
:read-only 是纯视觉钩子，用户仍可聚焦、选中、复制、右键粘贴。想实现“查看模式”体验，必须额外加控制：

											
												
												
													CSS工具箱(专业版)
													全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。
												
												下载
												
											
										

禁用文本选择：user-select: none；若允许复制则用 user-select: text

光标提示只读：cursor: default（比 not-allowed 更友好，保留可点击感）
阻止粘贴：监听 paste 事件并调用 event.preventDefault()

跳过 Tab 焦点：tabindex="-1"（否则键盘用户会停在这里）
背景/边框示例：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[readonly]，所有浏览器都支持，行为确定
Firefox 必须显式补上：input:-moz-read-only，否则样式丢失
Shadow DOM 内部默认不穿透，需用 ::slotted(textarea:read-only)



真正难处理的是「逻辑只读但未标记」的字段，比如后端返回的字段没带 readonly 标识，前端又没同步写入 DOM 属性——这时 :read-only 完全无感知，得靠 class 或数据驱动逻辑兜底。