答案：通过使用:focus伪类设置边框颜色、去除outline并添加box-shadow，可解决表单输入框聚焦样式不明显问题。1. 为input添加:focus样式以明确边框颜色；2. 设置outline: none消除浏览器默认轮廓；3. 使用box-shadow增强视觉反馈；4. 必要时提升CSS优先级或使用!important；5. 引入CSS Reset或Normalize.css统一浏览器默认样式，确保兼容性与无障碍访问。
表单输入框在聚焦时默认的边框样式可能不明显或被浏览器默认样式覆盖，导致你设置的 :focus 样式无法正常显示。这通常是因为没有正确重置或覆盖浏览器的默认行为。
检查并使用 :focus 伪类
确保为输入框添加了 :focus 伪类，并设置了明确的边框颜色：示例代码：
input:focus {
border-color: #007bff;
outline: none; /* 去除默认外轮廓，避免干扰 */
box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
}
移除 outline 干扰
很多浏览器在聚焦时会显示蓝色或灰色的 outline，这会遮盖你的边框效果。虽然可访问性建议保留焦点样式，但你可以用outline: none 并通过 box-shadow 提供视觉反馈来替代：- 设置
outline: none消除默认外框 - 使用
box-shadow增强聚焦状态的可见性 - 确保聚焦状态依然清晰可辨，符合无障碍标准
提高样式优先级
如果你的样式仍不生效，可能是被其他 CSS 规则覆盖。尝试提升选择器优先级：- 使用更具体的选择器，如
.form-group input:focus - 添加
!important（仅在必要时）：
input:focus {
border-color: #007bff !important;
outline: none !important;
}
验证浏览器默认样式
不同浏览器对表单元素的默认样式处理不同。建议使用 CSS Reset 或 Normalize.css 统一初始样式，避免兼容问题。基本上就这些。只要正确使用 :focus、清除 outline、合理设置边框和阴影，就能让输入框聚焦时的颜色正常显示。
