边框高亮效果需用:focus + border或box-shadow实现，但必须先设outline:none移除默认遮挡的蓝色outline，并补充可访问的替代样式如box-shadow；动画用::after伪元素配合width过渡实现，注意定位、移动端兼容及textarea特殊处理。
直接说结论：边框高亮效果不靠 outline，而要靠 :focus + border 或 box-shadow 控制；但移除默认 outline 必须加 outline: none，否则它会盖住你写的高亮样式。
input:focus 时 border-color 不生效？先检查 outline 是否遮挡
Chrome、Edge 等浏览器默认给聚焦的 input 加一层蓝色 outline，它层叠在 border 之上。哪怕你写了 border: 2px solid #007bff，也看不到——因为 outline 盖住了。
- 必须显式写
outline: none或outline: 0才能移除它 - 但不能只删
outline就完事：键盘用户依赖焦点指示，得补上可访问的替代方案 - 推荐用
box-shadow: 0 0 0 2px rgba(0,123,255,.25)替代，既高亮又不破坏布局 - 如果坚持用
border，记得把正常态的border设为transparent或浅色，避免聚焦时宽度突变
实现从左到右展开的边框动画效果
这种动画本质是用 ::after 伪元素模拟一条动态线，不是真改 border。关键点在于定位、尺寸控制和过渡时机。
-
position: relative要加在input上，否则::after无法相对它定位 -
::after的content: ''和display: block缺一不可 - 动画方向靠
left: 0; width: 0→width: 100%实现，不要用transform: scaleX()，兼容性差且容易抖动 - 过渡时间建议设为
transition: width 0.3s ease，太快显得生硬，太慢响应迟滞 - 别忘了给
input:focus加border-bottom: none或透明化，否则原边框和动画线会重叠
移动端表单输入框高亮失效？检查 user-select 和 -webkit-tap-highlight-color
在 iOS Safari 或部分安卓 WebView 中，点击 input 后可能没高亮，或出现灰色半透明蒙层，这不是 CSS 没生效，而是系统级反馈干扰。
立即学习“前端免费学习笔记（深入）”；
- 加
-webkit-tap-highlight-color: transparent去掉点击蒙层 - 如果用了
user-select: none（比如防误选），会导致:focus不触发，必须删掉或改为user-select: text - 某些老版本 UC 浏览器不支持
::after在input上渲染，得降级用border-bottom+transition - 确保
meta viewport设置正确：<meta name="viewport" content="width=device-width, initial-scale=1">，否则缩放会破坏焦点逻辑
textarea 边框高亮怎么同步处理？别漏掉 resize 和 vertical-align
textarea 默认可拖拽，resize 会干扰边框动画定位；它的基线对齐方式也和 input 不同，容易导致高亮线偏移。
- 统一加
resize: none，再用min-height/max-height控制尺寸 -
vertical-align: top或middle防止和旁边标签错位 - 如果套了
label包裹，注意for和id必须匹配，否则点击 label 不触发:focus - 动画伪元素要用
absolute定位到底部，bottom: 0比top: 100%更稳，尤其在多行输入时
真正麻烦的不是写几行 CSS，而是不同浏览器对 :focus 的触发时机、伪元素渲染、outline 层叠顺序各有差异。建议在真实设备上至少测 Chrome、Safari、Edge 三端，别只看开发工具里的模拟器。
