使用:focus伪类可自定义输入框聚焦样式，通常先去除outline再设置border-color和box-shadow，如input:focus { outline: none; border-color: #007bff; box-shadow: 0 0 5px rgba(0,123,255,0.5); }，并可通过transition提升交互体验，适用于input、textarea等元素。
当用户点击输入框时，浏览器默认会给它添加一个聚焦（focus）状态的外框。我们可以通过 CSS 的 :focus 伪类来自定义这个状态下的样式，比如改变边框颜色、背景色或阴影效果。
使用 :focus 伪类修改边框颜色
最常见的方式是修改输入框在获得焦点时的边框颜色。你可以通过设置 border 或 outline 属性来实现。
示例代码：input:focus {
outline: 2px solid blue;
border-color: blue;
}
注意：大多数浏览器默认使用 outline 显示聚焦样式。如果你想完全控制样式，可以先将其移除再自定义。
立即学习“前端免费学习笔记（深入）”；
去除默认轮廓并添加自定义效果
为了更美观的设计，通常会先去掉默认的 outline，然后用 border、box-shadow 或两者结合来表现聚焦状态。
推荐写法：
input {
border: 1px solid #ccc;
padding: 8px;
border-radius: 4px;
transition: all 0.3s ease;
}
input:focus {
outline: none; /* 去除默认轮廓 */
border-color: #007bff;
box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}
这里加入了 transition 让颜色变化更平滑，提升用户体验。
支持多种输入元素
上述样式不仅适用于 ，也可以扩展到 和带有 contenteditable 的元素。
input:focus,
textarea:focus {
outline: none;
border-color: #28a745;
box-shadow: 0 0 6px rgba(40, 167, 69, 0.3);
}
基本上就这些。通过 focus 状态的样式调整，可以让表单交互更清晰直观，同时保持界面美观。关键是合理使用 outline、border 和 box-shadow，并注意可访问性——确保聚焦状态依然明显可见。
