使用:focus伪类为输入框添加视觉反馈，如改变边框、阴影或背景色，提升交互体验；需保留或替换默认outline以保障可访问性，可结合属性选择器和:valid/:invalid实现精准、动态的样式控制。
当用户在网页表单中操作输入框时，如何通过视觉反馈提示当前正在编辑的字段？CSS选择器提供了一种简洁高效的方式——利用伪类选择器实现聚焦状态的样式控制。这不仅能提升用户体验，也让界面更具交互感。
:focus 伪类选择器的基本用法
在表单控件获得焦点时，:focus 伪类会自动匹配该元素，允许我们为其设置特定样式。
- 常用于 input、textarea、select 等可聚焦元素
- 浏览器默认会给聚焦元素添加外轮廓（outline），可通过 CSS 调整或替换
- 支持所有主流浏览器，兼容性良好
示例：
input:focus {
border-color: #007cba;
outline: none;
box-shadow: 0 0 5px rgba(0, 124124, 186, 0.5);
}
增强可访问性的聚焦样式设计
虽然可以移除默认 outline，但必须提供替代的视觉提示，否则会影响键盘用户的操作体验。
立即学习“前端免费学习笔记（深入）”；
- 避免完全去除 focus 样式，尤其对残障用户不友好
- 使用 box-shadow 或 border 变化代替原生 outline
- 确保对比度足够，便于识别
推荐做法：
Matlab语言的特点 中文WORD版
下载
本文档主要讲述的是Matlab语言的特点；Matlab具有用法简单、灵活、程式结构性强、延展性好等优点，已经逐渐成为科技计算、视图交互系统和程序中的首选语言工具。特别是它在线性代数、数理统计、自动控制、数字信号处理、动态系统仿真等方面表现突出，已经成为科研工作人员和工程技术人员进行科学研究和生产实践的有利武器。希望本文档会给有需要的朋友带来帮助；感兴趣的朋友可以过来看看
input:focus,
textarea:focus,
button:focus {
outline: 2px solid #007cba;
outline-offset: 2px;
}
结合属性选择器精确控制表单元素
在复杂表单中，可能只想对特定类型的输入框应用聚焦样式。此时可结合属性选择器进行更精细的匹配。
- [type="text"]、[type="email"] 可区分不同输入类型
- 配合 :focus 实现差异化交互效果
例如只针对邮箱输入框：
input[type="email"]:focus {
background-color: #f0f9ff;
}
与验证状态结合的动态样式策略
聚焦状态常与表单验证联动。用户在填写过程中，可通过样式变化提示格式是否正确。
- 使用 :focus + :valid/:invalid 组合选择器
- 在聚焦时显示实时校验反馈
示例：仅在聚焦且内容无效时标红边框
input:invalid:focus {
border-color: #d32f2f;
box-shadow: 0 0 4px #d32f2f;
}
基本上就这些。合理运用 :focus 及其组合选择器，能让表单交互更直观清晰，同时兼顾美观与可用性。关键是在视觉设计和无障碍支持之间找到平衡点。不复杂但容易忽略细节。
