通过:focus伪类修改CSS输入框焦点颜色，可调整border或outline样式。1. 设置border颜色并移除默认outline；2. 自定义outline颜色以保留可访问性提示；3. 添加transition实现平滑过渡；4. 使用class针对特定输入框设置。需注意视觉效果与用户体验平衡，避免完全去除焦点轮廓。
调整CSS输入框获取焦点（focus）时的颜色，主要是通过修改其
outline
或
border
样式来实现。默认情况下，
浏览器
会在输入框获得焦点时显示一个蓝色或高亮的外边框，我们可以通过自定义CSS来改变这个效果。
1. 修改焦点边框颜色
使用
:focus
伪类选择器
，可以针对输入框聚焦状态设置边框颜色：
说明：如果不加
outline: none
，浏览器默认的焦点轮廓可能会和你设置的边框同时出现，影响美观。
2. 使用外轮廓（outline）自定义颜色
如果你希望保留轮廓效果（更符合可访问性），可以直接修改
outline
颜色：
立即学习
“
前端免费学习笔记（深入）
”；
这种做法在保持视觉提示的同时提升设计感，且对键盘导航用户更友好。
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
3. 添加平滑过渡效果
让颜色变化更自然，可以加上过渡动画：
transition 让边框颜色渐变，用户体验更柔和。
4. 针对不同输入框单独设置
如果只想修改特定输入框，可以添加 class 来区分：
HTML中使用：
基本上就这些。关键是结合
:focus
和
border
或
outline
属性灵活控制颜色与样式，注意可访问性，避免完全移除焦点提示。
input:focus {
border: 2px solid #007bff; /* 蓝色边框 */
outline: none; /* 移除默认轮廓线 */
}
input:focus {
outline: 2px solid #ff5722; /* 橙红色轮廓 */
outline-offset: 1px; /* 控制轮廓与边框的距离 */
border: 1px solid #ccc;
}
input {
border: 1px solid #ddd;
transition: all 0.3s ease;
}
input:focus {
border-color: #4caf50;
outline: 2px solid rgba(76, 175, 80, 0.3);
}
.input-primary:focus {
border-color: #0056b3;
outline: none;
}