input[readonly]比:read-only更可靠，因其是属性选择器，从html解析阶段就匹配，不依赖运行时状态；而:read-only在旧safari、vue动态渲染漏属性或js仅设element.readonly=true（未写入dom）时会失效。

为什么input[readonly]比:read-only更可靠

因为input[readonly]是属性选择器，浏览器从 HTML 解析阶段就匹配，不依赖运行时状态判定；而:read-only在某些旧 Safari、Vue 动态渲染漏属性、或 JS 仅设置 element.readOnly = true（没写入 DOM 属性）时会失效。项目里只要确保 DOM 上有 readonly 属性，input[readonly] 就稳稳生效。

input[readonly] 的样式必须覆盖哪些默认行为

原生 readonly 输入框默认仍带可编辑外观，容易误导用户。要真正“看起来不能改”，至少补三处：

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

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

下载

• background-color: #f5f5f5 —— 避免用 opacity 或 filter: grayscale()，否则文字可读性下降或边框被误灰化
• cursor: not-allowed —— 替换默认的 text 光标，但注意：它不影响键盘操作，只提供视觉提示
• color: #666 和 border-color: #ddd —— 单独控制文字和边框色，比全局 opacity 更精准

如何避免团队协作中readonly被误写成disabled

两者语义和行为完全不同：disabled 元素不提交、不可聚焦、键盘 Tab 跳过；readonly 仍可聚焦、可复制、值参与表单提交。最容易出错的是：

• 手写 HTML 时打错：<input disabled> 写成 <input readonly>，但实际需求是禁用而非只读
• Vue/React 中绑定错误：:readonly="isReadonly" 写成 :disabled="isReadonly"，或大小写写成 readOnly（React 正确） vs readonly（HTML 原生）
• QA 测出来才发现——该字段本该提交却没进后端，或用户无法复制订单号

要不要加 user-select: none？

加不加取决于业务场景：

• 需要用户复制内容（如订单号、API Key）—— 不加，保留默认 user-select: text，这是 readonly 的核心价值之一
• 纯展示且防误触（如合同条款预览页）—— 可加 user-select: none，但得同步加 pointer-events: none 吗？不行，这会让 label 点击失效、破坏可访问性；正确做法是只加 user-select: none，并确保 cursor: not-allowed 已到位
• 别忘了 Safari 对 user-select 支持良好，但老 iOS 版本需测试

真实麻烦不在 CSS 写法本身，而在属性是否真出现在 DOM 上、以及团队对 readonly 和 disabled 的语义是否达成一致。一个 readonly 字写错，后端就收不到那个字段。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！