使用:focus伪类可实现输入框聚焦高亮，1.通过设置border-color改变边框颜色；2.结合box-shadow添加发光效果；3.适用于input、textarea等元素；4.需添加outline:none避免默认样式冲突，提升表单交互体验。
要让表单输入框在获得焦点时显示高亮效果，可以使用CSS的 :focus 伪类，结合修改边框（border）颜色、添加阴影（box-shadow）等方式实现视觉上的高亮。这是一种常见且用户体验良好的做法。
使用 :focus 伪类改变边框颜色
当用户点击输入框时，浏览器会触发 focus 状态。你可以通过为 input:focus 设置不同的 border 颜色来突出当前正在编辑的字段。
input {
border: 1px solid #ccc;
padding: 10px;
font-size: 16px;
outline: none; /* 移除默认的聚焦外框 */
}
input:focus {
border-color: #007bff; / 蓝色高亮边框 /
}
增强视觉效果：添加阴影
除了改变边框颜色，还可以使用 box-shadow 添加发光效果，使输入框更明显。
input:focus {
border-color: #007bff;
box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* 柔光蓝色阴影 */
}
适用于其他表单元素
该方法不仅适用于文本输入框，也可用于 textarea、select 等可聚焦元素。
立即学习“前端免费学习笔记（深入）”；
textarea:focus,
select:focus {
border-color: #28a745;
box-shadow: 0 0 5px rgba(40, 167, 69, 0.3);
}
基本上就这些。利用 :focus 配合 border 和 box-shadow，就能轻松实现清晰自然的输入框聚焦高亮效果，提升表单的可用性。不复杂但容易忽略细节，比如记得去掉 outline 以避免样式冲突。
