input:focus 改 border-color 没反应是因为浏览器默认 outline 层叠在 border 上方，需先设 outline: none 并补充可访问的 box-shadow 替代方案。
input 输入框高亮效果不靠 outline，而必须用 :focus 配合 border-color 或 box-shadow 控制；但删掉默认 outline 前，得先确认它没盖住你写的样式。
为什么 input:focus 改 border-color 没反应？
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或浅色，避免聚焦时宽度突变
box-shadow 实现外发光，但光晕“不发光”？
直接写 input:focus { box-shadow: 0 0 8px rgba(66, 153, 225, 0.6); } 即可，关键不是模糊值大，而是颜色带透明度。
- 避免写成
box-shadow: 0 0 8px #4299e1—— 纯色不透明会导致光晕生硬，像描边而非发光 - 检查父容器是否用了
overflow: hidden：box-shadow 会被裁掉，导致“发光消失” - 别漏了
box-sizing: border-box，否则 padding/border 会撑宽，影响阴影定位 - Safari 上若同时设了
border-radius和大模糊值（如 >12px），可能出现轻微锯齿
移动端点击没高亮，或 iOS 出现灰色蒙层？
这不是 CSS 失效，而是系统级反馈干扰。
- 加
-webkit-tap-highlight-color: transparent去掉 iOS 点击蒙层 - 如果用了
user-select: none（比如防误选），会导致:focus不触发，必须删掉或改为user-select: text - iOS Safari 默认会给聚焦
input加半透明灰色背景，会盖住你的发光效果；加-webkit-appearance: none可去除，但必须同步补全border和background，否则输入框可能“消失” - 某些老版本 UC 浏览器不支持
::after在input上渲染，动画类高亮需降级为border-bottom + transition
textarea 和特殊 type 输入框要额外注意什么？
textarea 的基线对齐、可拖拽行为和默认 resize 会干扰高亮定位；type="search"、type="number" 等自带控件也会干扰样式一致性。
-
textarea要显式设resize: none，并注意vertical-align，否则高亮线容易偏移 -
type="search"的清空按钮需重置：input[type="search"]::-webkit-search-cancel-button { appearance: none; } -
type="number"的增减按钮（::-webkit-inner-spin-button）占空间且不响应 width，必须干掉 - 所有
input都该统一加box-sizing: border-box，否则不同type渲染宽度不一致
真正难的不是写对那几行 CSS，而是判断当前失效到底是被 outline 盖住、被 overflow 裁掉、还是被某个伪元素或系统样式劫持了——得一个个排除，而不是反复调颜色。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
