怎样定义表单输入框获取焦点时的样式_使用CSS :focus伪类

:focus 伪类生效需元素可聚焦且未被禁用或只读，常见失效原因包括 disabled/readonly 状态、缺少 tabindex 或被高优先级样式覆盖；推荐统一处理 input:focus, textarea:focus, select:focus 并清除 outline，兼顾可访问性时可用 :focus-visible 回退方案。

直接用 :focus 就能生效，但浏览器默认焦点样式（比如 Chrome 的蓝色外框）常会干扰设计，必须显式覆盖；否则即使写了 :focus 样式，也可能被用户完全看不到。

为什么写了 :focus 却没反应？

最常见原因是：输入框被禁用（disabled）、只读（readonly），或元素本身不可聚焦（比如没加 tabindex 且不是原生表单控件）。另外，某些 CSS 框架（如 Bootstrap）会重置 :focus 样式，需检查是否被更高优先级规则覆盖。

• 确认元素有 tabindex="0" 或是原生可聚焦元素（<input>、<textarea>、<button> 等）
• 用浏览器 DevTools 的 “Elements” 面板手动点击元素，再选中 “:focus” 强制触发伪类，验证样式是否被写错或被覆盖
• 避免只写 input:focus —— 若有多种输入类型（type="email"、type="number"），建议用 input:focus, textarea:focus, select:focus 统一处理

:focus 和 :focus-visible 怎么选？

:focus 在任何方式获得焦点时都触发（鼠标点击、Tab 键、JS .focus()），而 :focus-visible 只在“明确由键盘操作触发”时生效（例如按 Tab），对鼠标点击无效。这对可访问性很关键：你可能只想给键盘用户强化视觉反馈，而不干扰鼠标用户的界面干净度。

• 想统一控制所有焦点状态 → 用 :focus，但记得同时清除默认 outline：outline: none
• 想保留鼠标点击的简洁感，只增强键盘导航体验 → 用 :focus-visible，且建议配合 :focus 回退（因为旧浏览器不支持）：

input:focus {  outline: none;}input:focus-visible {  outline: 2px solid #007bff;}

常用且安全的 :focus 样式组合

单纯改边框颜色容易被忽略，尤其在深色背景或小尺寸屏幕上。推荐组合使用边框、阴影和背景微调，确保对比度达标（WCAG AA 要求至少 3:1）。

立即学习“前端免费学习笔记（深入）”；

• 别只改 border-color，加上 box-shadow 提升辨识度：box-shadow: 0 0 0 2px rgba(0, 123, 191, 0.25)
• 避免用纯色填充背景（如 background: #eef7ff），可能影响文字可读性；若真要改背景，用极浅透明色更稳妥
• 移动端 Safari 对 :focus 触发较保守，有时需加 input:focus { outline: none; } + -webkit-appearance: none 才稳定生效
• 如果用了 CSS-in-JS 或 Shadow DOM，注意样式作用域 —— :focus 是在元素自身上生效，不是父容器

真正难的不是写对 :focus，而是判断什么时候不该用它：比如表单校验错误时，焦点样式该和错误态叠加还是分离？这时候往往得靠 JS 控制 class 切换，而不是只依赖伪类。