输入框聚焦时的颜色主要通过:focus伪类控制，常用border-color、outline-color或box-shadow设置；需同时定义border-width和border-style，慎用outline:none，推荐box-shadow替代并添加transition实现平滑动效。
输入框聚焦时的颜色，主要通过 :focus 伪类来控制，关键在于设置 border-color、outline-color 或 box-shadow 等属性。
修改边框聚焦颜色
最常用方式是改边框色。默认输入框聚焦时常带蓝色边框，可通过以下 CSS 覆盖：
- 给
input:focus设置border-color，例如：border-color: #409eff; - 注意同时设置
border-width和border-style（如solid），否则可能不生效 - 若原样式用了
border: none，需先恢复边框，再单独设颜色
去除或自定义外轮廓（outline）
浏览器默认会加一圈虚线外轮廓，影响美观：
- 用
outline: none;彻底去掉（注意：降低可访问性，慎用） - 更推荐保留可访问性：改
outline-color或用outline-offset微调位置 - 常见做法是用
box-shadow替代 outline，例如：box-shadow: 0 0 0 2px rgba(64, 158, 239, 0.3);
兼容不同输入类型和状态
确保所有文本类输入都统一响应：
立即学习“前端免费学习笔记（深入）”；
- 选择器可写成
input[type="text"]:focus, input[type="password"]:focus, textarea:focus - 加上
:focus-visible可区分键盘聚焦（提升可访问性），例如：input:focus-visible { outline: 2px solid #409eff; } - 避免只写
:focus导致鼠标点击也触发 outline，可结合:focus-within控制父容器高亮
配合过渡动效更自然
聚焦颜色变化加动画，体验更平滑：
- 在原始
input样式中添加：transition: border-color 0.2s ease, box-shadow 0.2s ease; - 聚焦时的
border-color或box-shadow会渐变切换，不突兀 - 慎用
all: transition，可能影响性能或意外动画
