应只修改表单项的背景和边框透明度，文字、placeholder、label保持100%不透明；禁用交互用pointer-events:none而非disabled，确保可访问性和样式可控。
表单提交后让表单项变半透明，不是靠 opacity 一设了事——那样会让输入框里的文字、label、placeholder 全部发虚，用户根本看不清已填内容；真正可控的做法是只动背景和边框，文字保持 100% 不透明。
为什么不能直接给 form 或 input 加 opacity
常见错误是提交后执行 form.style.opacity = "0.4" 或加 class：.submitted { opacity: 0.4; }。结果：光标消失、placeholder 变淡、文字对比度暴跌、甚至键盘焦点 outline 模糊到看不见。更糟的是，如果表单嵌在 modal 里，父级已有 opacity，还会叠乘（比如 0.4 × 0.8 = 0.32），直接不可读。
-
opacity作用于整个渲染树，子元素无法“自救”——哪怕你给input单独设opacity: 1，实际仍是 0.4 × 1 = 0.4 - 提交后仍需支持可访问性（如屏幕阅读器聚焦、键盘导航），
opacity: 0.4会大幅降低文本对比度，可能不满足 WCAG 2.1 AA 标准 - 某些浏览器对低透明度下的 caret 渲染异常，导致光标“卡住”或闪烁
正确做法：用 rgba() 锁定背景与边框透明度
提交后只改 background-color 和 border-color 的 alpha 值，文字、placeholder、label 全部保持原样。
- 给所有表单项统一设：
input, select, textarea { background-color: rgba(240, 240, 240, 0.3); border-color: rgba(200, 200, 200, 0.5); } - 若需保留原有边框粗细，记得补上
background-clip: padding-box，防止背景色溢出覆盖边框 - label 文字不用动，但可微调
color提升对比度，比如从#333改为#555，避免在浅灰背景上显得太轻 - placeholder 颜色建议显式声明：
::placeholder { color: rgba(120, 120, 120, 0.7); }，别依赖浏览器默认值
提交后禁用交互但保留可读性的关键处理
半透明只是视觉反馈，用户仍可能需要复制内容、检查填写项——所以不能简单 disabled，否则文字变灰、失去 focus 状态、iOS 上还可能触发缩放。
- 用
pointer-events: none阻止点击/聚焦，但保留tabindex="-1"让键盘用户能跳过，且文字渲染不受影响 - 避免
input[disabled]：它会强制重置所有样式（包括你刚设的rgba()背景），且部分浏览器下 placeholder 不显示 - 如果表单含复选框/单选按钮，它们的
background-color也要单独设rgba()，因为默认是系统控件，不继承父级背景 - IE11 及以下不支持
rgba()在input上生效，如需兼容，fallback 到background-image: url(transparent-bg.png)
最易被忽略的一点：提交后若表单包裹在 position: relative 容器里，且该容器有 z-index，记得检查是否被其他层叠上下文（比如弹窗遮罩）意外裁剪——半透明背景看起来“断层”，往往不是颜色问题，而是渲染层级被截断了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
