CSS如何使用focus状态颜色_focus伪类突出输入框

使用:focus伪类可提升表单交互体验，如改变边框色、添加阴影；需保留或替换outline确保可访问性，配合transition实现平滑动画，增强用户体验。

在CSS中，可以通过 :focus 伪类来控制输入框获得焦点时的样式，比如改变边框颜色、背景色或添加阴影，从而突出当前正在操作的输入框。这能提升表单的可用性和用户体验。

使用 :focus 伪类设置焦点样式

:focus 是一个动态伪类，当用户通过鼠标点击或键盘 Tab 键选中输入框时触发。你可以为 、 等可聚焦元素设置该样式。

例如，让输入框在获得焦点时边框变为蓝色：

input:focus {
  border-color: #007bff;
  outline: none; /* 去除默认外轮廓，自定义样式 */
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

• border-color：修改边框颜色以作提示
• outline: none：移除浏览器默认的聚焦轮廓线（通常为蓝色或黑色虚线）
• box-shadow：添加发光效果增强视觉反馈

常见应用场景与建议

在实际开发中，合理使用 :focus 可帮助用户明确当前操作位置，尤其在复杂表单中尤为重要。

• 保持焦点样式清晰可见，但不要过于突兀
• 确保可访问性，避免完全移除轮廓而不提供替代样式（对键盘用户不友好）
• 可以配合 transition 实现平滑过渡效果

加入过渡动画让样式变化更自然：

input {
  border: 1px solid #ccc;
  padding: 8px;
  transition: all 0.3s ease;
}
input:focus {
border-color: #007bff;
box-shadow: 0 0 8px rgba(0, 123, 255, 0.3);
}

注意事项

虽然 outline: none 能去除难看的默认边框，但必须提供足够的视觉替代方案，否则会影响键盘导航用户的使用体验。无障碍设计推荐保留或替换为明显的样式。

基本上就这些。正确使用 :focus 伪类，能让输入框交互更直观，表单更易用。