:focus 伪类仅在元素获得焦点时生效，常见失效原因包括 tabindex="-1"、disabled/readonly 属性及旧版 Safari 对 contenteditable 支持不一致；border 样式需协调 width/style/动画，避免跳动，推荐聚焦时改色加阴影；placeholder 颜色需与 focus 状态协同；移动端必须重置 -webkit-appearance 和 appearance 并添加 touch-action: manipulation。
:focus 伪类触发时机和常见失效原因
输入框获得焦点时，:focus 才会生效，但不是所有情况都能触发：比如用 tabindex="-1" 的元素无法通过 Tab 键聚焦；被 disabled 或 readonly 的 <input> 也不会响应 :focus；部分旧版 Safari 对 contenteditable 元素的 :focus 支持不一致。
实操建议：
- 确保输入框没有设置
tabindex="-1"或disabled - 在调试时临时加一句
outline: 2px solid red;确认是否真能聚焦 - 如需兼容 Firefox 中点击 label 不自动聚焦的问题，检查
<label for="id"></label>是否与id完全匹配
border 样式组合影响视觉权重和交互反馈
单纯改 border-color 很难做出有层次的美化效果，关键在于 border-width、border-style 和过渡动画的配合。例如细边框（1px solid）在聚焦时突然变粗（2px solid），容易造成“跳动”感；而保持宽度不变、只变颜色+加阴影更稳妥。
推荐做法：
立即学习“前端免费学习笔记（深入）”；
- 默认状态用
border: 1px solid #d1d5db;，聚焦时改为border-color: #3b82f6;+box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); - 避免使用
border: none;后再靠box-shadow模拟边框——某些屏幕阅读器或高对比度模式下会丢失视觉边界 - 若需圆角，统一用
border-radius: 6px;，不要让聚焦态和常态的圆角值不同，否则动画会断裂
同时处理 placeholder 和 focus 状态下的颜色协调
当用户还没输入内容就聚焦，placeholder 文字仍可见，此时它的颜色如果和边框不协调，会显得混乱。Chrome/Firefox 对 ::placeholder 的继承规则不同，尤其在 :focus 下容易忽略样式重置。
安全写法：
- 给输入框统一设
color: #1f2937;，再单独控制 placeholder：::placeholder { color: #9ca3af; } - 聚焦时让 placeholder 变淡：
&:focus::placeholder { color: #d1d5db; }（需用 SCSS 或重复选择器） - 不要依赖
opacity控制 placeholder 透明度——它会影响整个伪元素，包括可能存在的 background-image
移动端 Safari 的 focus 处理要额外加 -webkit-appearance
iOS Safari 默认会给 <input type="text"> 加一层内阴影和圆角，且 :focus 时可能意外放大或触发键盘缩放。不重置 -webkit-appearance，CSS 边框样式很可能被覆盖或表现异常。
必须包含的兜底声明：
-
-webkit-appearance: none;（移除系统默认样式） -
appearance: none;（标准写法，现代浏览器支持） - 加上
touch-action: manipulation;避免 iOS 上长按触发菜单干扰聚焦
这些不是“可选优化”，而是让 :focus 和 border 在真实设备上可靠工作的前提。
