:focus伪类没反应主要是被默认outline覆盖、移动端触发条件苛刻或CSS层叠优先级不足；需重置outline、添加inputmode属性并检查样式权重。
focus伪类为什么没反应？检查是否被outline覆盖
很多情况下写好了
样式但边框没变，其实是浏览器默认的
在捣鬼——它会叠在你自定义的
上，甚至完全遮住。更麻烦的是，某些系统（比如 macOS + Safari）对
的渲染逻辑特殊，视觉上像“没生效”。
务必显式重置
，但别只在
里加，先在基础输入框样式里设好
如果要保留可访问性（推荐），用
替代
，再配合
避免和 border 挤在一起
Chrome/Firefox 对
的处理不一致，统一改成
更可控
input:focus 边框变色但太突兀？用 transition 平滑过渡
直接改
会瞬间跳变，用户感知生硬。加
是最轻量的体验优化，但要注意属性范围和时长取舍。
只过渡
和
，别写
—— 会意外触发重排，尤其在旧版 Safari 上卡顿
推荐时长
：短于 0.1s 不易察觉，长于 0.2s 显拖沓
输入框初始状态必须声明
（哪怕
），否则
的 transition 无法插值
移动端 focus 样式失效？iOS Safari 的 focus 触发条件很苛刻
iOS Safari 默认只给可交互元素（如带
或
的）触发
，纯
在某些 WebView 或禁用缩放页面里可能完全不响应。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
给 input 加
属性，明确告诉系统这是文本输入场景
避免用
或
，它们会抑制 focus 状态更新
真机测试时，别只点输入框——试试双击或长按后点击“选择”，有时只有软键盘弹出才真正触发 focus
focus 样式被其他 CSS 覆盖？优先级和继承链容易被低估
最常见的不是写错，而是被更高权重的选择器压住，比如框架的
或重置样式里的
。
立即学习
“
前端免费学习笔记（深入）
”；
用浏览器开发者工具的“Computed”面板，直接看
最终值从哪来，别猜
如果必须提权，用
比单纯
更具体；但别滥用
，它会让后续维护变脆弱
注意 CSS 顺序：后写的规则覆盖先写的，把你的 focus 样式放在重置样式之后、组件样式之前最稳妥
实际项目里，
表现不一致往往不是语法问题，而是被 outline、移动端策略、CSS 层叠这三者中的某一个悄悄截胡了。调的时候盯住 DevTools 的 “Styles” 和 “Computed” 两个标签页，比反复改代码快得多。
:focusoutlineborderoutlineoutline: none:focusoutline: 2px solid #007bffnoneoutline-offset: 2pxoutline-style: autosolidborder-colortransitionborder-colorbox-shadowall0.15sborderborder: 1px solid #ccc:focusinput {
border: 1px solid #ccc;
transition: border-color 0.15s, box-shadow 0.15s;
}
input:focus {
border-color: #007bff;
box-shadow: 0 0 0 3px rgba(0, 123, 191, 0.25);
}inputmodetabindex:focusinputmode="text"user-scalable=nomaximum-scale=1.form-control:focusinput:focus { outline: 0 }border-colorinput[type="text"]:focusinput:focus!important:focus