使用:focus伪类可实现输入框聚焦效果，通过自定义边框、阴影和过渡动画提升用户体验，同时需确保可访问性。
当用户点击或使用Tab键切换到某个输入框时，我们通常希望给一个明显的视觉反馈，这就是“聚焦效果”。用CSS可以轻松实现这一交互细节，提升用户体验。
每个表单输入框（如input、textarea）都可以通过 :focus 伪类来定义获得焦点时的样式。这是实现聚焦效果的核心方法。
例如，改变边框颜色和添加阴影：
input:focus {
border-color: #007bff;
outline: none; /* 去除浏览器默认轮廓 */
box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}
浏览器默认会给聚焦元素加上蓝色轮廓，但可能与设计风格不符。你可以将其去除并替换为更符合UI的样式。
立即学习“前端免费学习笔记（深入）”；
注意：去除轮廓后必须提供其他明显聚焦提示，否则影响可访问性。
input:focus {
outline: none;
border: 2px solid #0056b3;
box-shadow: 0 0 8px #007bff;
}
加入 transition 可以让边框、阴影等样式的改变更加平滑，避免突兀跳变。
推荐对常用属性添加过渡效果：
input {
border: 1px solid #ccc;
padding: 10px;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
<p>input:focus {
border-color: #007bff;
box-shadow: 0 0 10px rgba(0, 123, 255, 0.3);
}</p>你还可以结合 :valid、:invalid 等伪类，在聚焦的同时反映输入内容是否合规。
例如，仅在聚焦且输入无效时显示红色边框：
input:invalid:focus {
border-color: #dc3545;
box-shadow: 0 0 5px rgba(220, 53, 69, 0.3);
}
基本上就这些。通过:focus配合边框、阴影和过渡，就能做出清晰又美观的输入框聚焦效果。关键是保持视觉反馈明确，同时不破坏可用性。
以上就是如何用css实现表单输入框聚焦效果的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
759
收藏
