用 :read-only 伪类配合 ::after 伪元素在只读输入框右侧添加锁图标，需设置 position: relative 和 inputmode="none" 防键盘唤起。
只读输入框怎么加锁图标？用 :read-only 最直接
浏览器原生支持 :read-only 伪类，它能精准匹配 readonly 属性生效的 <input> 和 <textarea></textarea>，比靠 class 或 JS 判断更可靠。但注意：它不匹配 disabled 状态——后者会禁用交互且样式通常已灰化，不需要额外加锁标识。
-
:read-only只响应readonly="readonly"（或简写readonly），对disabled完全无效 - IE 不支持该伪类，如需兼容 IE，得 fallback 到 class 控制（比如
.input-readonly） - 加锁图标建议用背景图或伪元素，避免插入额外 DOM 影响表单序列化
用 ::after 在输入框右侧显示小锁图标
在输入框末尾加视觉提示，最轻量的方式是用伪元素。关键点是确保定位不遮挡文字、不干扰聚焦态，且适配不同高度的输入框。
- 必须给
input:read-only设置position: relative，否则::after无法绝对定位 -
right值建议用8px而非0，留出呼吸空间；top: 50%+transform: translateY(-50%)垂直居中更稳定 - 图标推荐用 inline SVG 或 Unicode ?（
\1F512），避免外部资源加载失败导致空白
input:read-only {
position: relative;
}
input:read-only::after {
content: "?";
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
color: #999;
pointer-events: none;
}
readonly 和 disabled 混用时样式会冲突吗？
会。如果一个元素同时有 readonly 和 disabled，:read-only 仍会匹配，但浏览器通常以 :disabled 样式为准（比如灰色文字、无边框）。这时加锁图标可能被覆盖或不可见。
- 真实场景中，二者语义不同：
readonly表示值可复制、可聚焦、会提交；disabled表示完全不可用、不提交 - 不要同时设置，选其一。若需“视觉只读+不提交”，应去掉
readonly，改用 JS 阻止输入 + class 标识 + 后端忽略该字段 - 检查 DevTools 中 computed styles，确认
::after是否被:disabled的opacity或color覆盖
移动端点击只读输入框会唤起键盘？怎么防
部分 Android 浏览器（尤其旧版 Chrome）对 :read-only 输入框仍会弹软键盘，纯 CSS 无法解决，必须配合 HTML 属性和 JS 微调。
- 务必加上
inputmode="none"，这是目前最有效的防唤起手段 - 再加
onfocus="this.blur()"是兜底方案，但会导致 focus outline 闪一下，体验略差 - 不要用
tabindex="-1"，否则键盘用户无法聚焦，损害可访问性
最终推荐写法：<input type="text" readonly inputmode="none" value="xxx">
inputmode="none" 和 position: relative 这两个前提，缺一个，锁图标就出不来或者键盘照弹。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
