通过:focus伪类修改CSS输入框焦点颜色，可调整border或outline样式。1. 设置border颜色并移除默认outline；2. 自定义outline颜色以保留可访问性提示；3. 添加transition实现平滑过渡；4. 使用class针对特定输入框设置。需注意视觉效果与用户体验平衡，避免完全去除焦点轮廓。
调整CSS输入框获取焦点（focus）时的颜色，主要是通过修改其 outline 或 border 样式来实现。默认情况下，浏览器会在输入框获得焦点时显示一个蓝色或高亮的外边框，我们可以通过自定义CSS来改变这个效果。
使用 :focus 伪类选择器，可以针对输入框聚焦状态设置边框颜色：
input:focus {
border: 2px solid #007bff; /* 蓝色边框 */
outline: none; /* 移除默认轮廓线 */
}
说明：如果不加 outline: none，浏览器默认的焦点轮廓可能会和你设置的边框同时出现，影响美观。
如果你希望保留轮廓效果（更符合可访问性），可以直接修改 outline 颜色：
立即学习“前端免费学习笔记（深入）”；
input:focus {
outline: 2px solid #ff5722; /* 橙红色轮廓 */
outline-offset: 1px; /* 控制轮廓与边框的距离 */
border: 1px solid #ccc;
}
这种做法在保持视觉提示的同时提升设计感，且对键盘导航用户更友好。
让颜色变化更自然，可以加上过渡动画：
input {
border: 1px solid #ddd;
transition: all 0.3s ease;
}
<p>input:focus {
border-color: #4caf50;
outline: 2px solid rgba(76, 175, 80, 0.3);
}</p>transition 让边框颜色渐变，用户体验更柔和。
如果只想修改特定输入框，可以添加 class 来区分：
.input-primary:focus {
border-color: #0056b3;
outline: none;
}
HTML中使用：
<input class="input-primary" type="text">
基本上就这些。关键是结合 :focus 和 border 或 outline 属性灵活控制颜色与样式，注意可访问性，避免完全移除焦点提示。
以上就是css输入框focus颜色如何调整的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
370
收藏
