input:focus边框变色无效主因是outline遮挡或初始border未定义，需设outline:none、定义基础border、transition写在默认状态并仅限border-color等必要属性。
直接用 :focus 就能实现，但多数人写完没效果，不是 CSS 写错了，而是被默认 outline 盖住了，或者初始 border 根本没定义。
input:focus 边框变色无效？先清 outline 再补 border
浏览器默认会给聚焦的 input 加一层蓝色 outline，它会叠在你写的 border-color 上面，导致颜色“看不见”。必须显式清除：
-
input:focus { outline: none; }—— 推荐写法，语义清晰 - 但删了
outline后，键盘用户（Tab 导航）就失去视觉反馈，得立刻补上替代方案，比如加box-shadow或改border-color - 关键前提：原始状态必须定义
border，例如input { border: 1px solid #ccc; }；如果初始是border: none;或压根没写，单改border-color不生效——宽度为 0，颜色无处可画
聚焦时文字颜色变化要单独控制 color 和 placeholder
color 属性只影响输入内容本身，不会自动作用于占位符文字。用户聚焦后想让“已输入的文字”和“placeholder”都变色，得分开写：
-
input:focus { color: #007bff; }—— 控制已输入文字颜色 -
input::placeholder { color: #999; }—— 默认 placeholder 颜色 -
input:focus::placeholder { color: #666; }—— 聚焦时 placeholder 变浅灰 - 注意：旧版 Safari 需加前缀
::-webkit-input-placeholder，Firefox 用::-moz-placeholder，但现代项目可优先用标准写法，再按需兜底
移动端 iOS Safari 点击没反应？加 ontouchstart 或 cursor:pointer
iOS Safari 默认压制非交互上下文的 :focus 渲染，纯 CSS 在真机上常“点不动”。这不是 bug，是系统策略：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 给
input加 HTML 属性：ontouchstart=""，触发底层聚焦逻辑 - 或加 CSS：
input { cursor: pointer; }，让系统识别为可点击目标 - 微信 WebView、部分安卓 WebView 也可能忽略纯
:focus，这时得用 JS 监听focus事件动态加 class，比如input.addEventListener('focus', () => input.classList.add('focused')) - 真机测试必须用手点，模拟器常误报成功
transition 动画卡顿？只过渡必要属性，别写 all
边框颜色平滑变化很常见，但动画一卡，八成是 transition 位置或范围错了：
-
transition必须写在**默认状态**里，例如input { transition: border-color 0.2s ease; }，而不是input:focus里 - 只过渡
border-color，别用transition: all 0.2s;——万一元素还有box-shadow或background-color，全被拖进动画，低端设备明显掉帧 - 如果同时用了
box-shadow做发光反馈，把它也列进transition：transition: border-color 0.2s ease, box-shadow 0.2s ease; - 暗色模式下颜色可能融进背景，
@media (prefers-color-scheme: dark)里必须重定义border-color和color，这不是优化项，是可访问性刚需
真正容易被忽略的，是 autofocus 在 iOS Safari 和 SPA 场景下基本失效——哪怕写了 autofocus，页面加载完光标也不会跳进去，必须用 input.focus() 手动触发，且得确保元素已挂载、可见、未禁用。
