使用:focus伪类可实现输入框聚焦时的视觉反馈，如改变边框颜色、添加阴影，并通过transition使效果更平滑；还可针对不同输入类型设置差异化样式，结合:focus-within让关联label同步响应，提升表单可用性。
当用户点击输入框（即获得焦点）时，我们通常希望有视觉反馈来提升体验。使用 CSS 可以轻松实现表单输入框的聚焦效果，比如改变边框颜色、添加阴影或调整背景色。
通过 :focus 伪类，可以定义输入框在获得焦点时的外观。
input:focus {
border-color: #007bff;
outline: none; /* 去除默认轮廓 */
box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}
说明：
加入 transition 让样式变化更平滑。
立即学习“前端免费学习笔记（深入）”；
input {
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 16px;
transition: all 0.3s ease;
}
<p>input:focus {
border-color: #007bff;
box-shadow: 0 0 8px rgba(0, 123, 255, 0.6);
}</p>transition 使边框和阴影的变化过程更柔和，提升用户体验。
你可以为文本框、密码框、邮箱等分别设置不同的聚焦样式。
input[type="text"]:focus,
input[type="email"]:focus {
border-color: #28a745;
box-shadow: 0 0 6px rgba(40, 167, 69, 0.4);
}
<p>input[type="password"]:focus {
border-color: #ffc107;
box-shadow: 0 0 6px rgba(255, 193, 7, 0.4);
}</p>这样可以根据输入内容类型提供差异化的视觉反馈。
如果想让对应的标签也响应聚焦状态，可以结合 HTML 结构使用 :focus-within。
.form-group:focus-within label {
color: #007bff;
font-weight: bold;
}
HTML 示例：
<div class="form-group"> <label for="username">用户名</label> <input type="text" id="username"> </div>
当输入框聚焦时，其父容器内的 label 文字也会变色，进一步提升可用性。
基本上就这些。合理使用 :focus 和过渡效果，能让表单更直观易用。关键是要保持一致性，同时避免过度设计影响可读性。
以上就是css制作表单输入框聚焦效果的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
587
收藏
