:focus伪类可实现输入框高亮，通过自定义border-color和box-shadow并配合transition，既能提升表单可用性，又能增强视觉反馈，但需确保去除outline后保留其他可视提示以保障可访问性。
当用户点击或通过键盘 Tab 键进入输入框时，:focus 伪类会自动生效，利用它可以轻松实现输入框的高亮视觉反馈。这种交互提示能提升表单的可用性，让用户清楚当前正在操作哪个字段。
使用 :focus 改变边框颜色
默认情况下，输入框获得焦点时浏览器会添加一个浅色轮廓。你可以用 CSS 覆盖这个样式，自定义边框颜色来突出显示。
例如：
input:focus {
border-color: #4A90E2;
outline: none; /* 去除默认外轮廓 */
}
这里将边框颜色改为蓝色，并移除系统默认的 outline，使样式更符合设计风格。注意：去除 outline 后必须提供其他可视提示（如边框变化），否则会影响可访问性。
立即学习“前端免费学习笔记（深入）”；
添加阴影增强聚焦效果
除了改变边框，还可以使用 box-shadow 添加发光或内凹阴影，让输入框更醒目。
示例：
input:focus {
outline: none;
border-color: #007AFF;
box-shadow: 0 0 5px rgba(0, 122, 255, 0.3);
}
这段代码为输入框添加了轻微的蓝色外阴影，营造出“被点亮”的感觉。透明度设为 0.3 可避免视觉干扰，保持界面柔和。
结合过渡动画让效果更自然
直接的颜色切换可能显得生硬，加入 transition 可以让边框和阴影的变化更平滑。
建议在原始样式中设置过渡：
input {
border: 1px solid #ccc;
padding: 10px;
border-radius: 4px;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
这样在进入和离开焦点时，颜色和阴影都会缓慢变化，用户体验更舒适。
基本上就这些。合理使用 :focus 配合边框、阴影和过渡，就能做出专业又直观的输入框高亮效果，不复杂但容易忽略细节。
