应使用:focus伪类定义搜索框聚焦样式，包括直接设置input[type="search"]:focus、结合:focus-within作用于容器、用:focus-visible区分键盘聚焦、配合transition实现平滑过渡。
如果您为HTML5页面添加了搜索框，但希望用户点击或通过Tab键聚焦时显示特定视觉反馈，则需要利用:focus伪类定义样式。以下是实现搜索框聚焦样式的多种方法：
一、使用:focus伪类直接设置input[type="search"]样式
该方法通过CSS选择器匹配搜索框元素，并在获得焦点时应用自定义边框、背景或阴影效果。它无需JavaScript，兼容性良好，适用于所有现代浏览器。
1、在HTML中定义搜索框：
2、在
立即学习“前端免费学习笔记（深入）”；
二、结合:focus-within作用于包含搜索框的容器
当搜索框被包裹在
1、编写HTML结构：
2、添加CSS规则：
.search-container:focus-within {
background-color: #F8FAFC;
border-radius: 4px;
padding: 8px;
}
3、确保label与input的for和id属性值一致，以支持可访问性聚焦联动。
三、使用:focus-visible实现仅键盘聚焦高亮
该方法区分鼠标点击与键盘Tab导航触发的聚焦行为，避免鼠标用户看到不必要的轮廓线，提升UX一致性。
1、为搜索框添加基础样式：
input[type="search"] {
outline: none;
}
2、单独定义键盘聚焦样式：
input[type="search"]:focus-visible {
outline: 2px solid #34C759;
outline-offset: 2px;
}
3、注意：需在支持:focus-visible的浏览器中测试，部分旧版浏览器可能回退至:focus。
四、配合transition实现平滑聚焦过渡效果
为聚焦状态添加CSS过渡动画，使边框颜色、阴影或尺寸变化更自然，增强交互响应感。
1、在搜索框CSS中统一声明过渡属性：
input[type="search"] {
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
2、设置默认状态样式：
input[type="search"] {
border: 1px solid #D1D5DB;
}
3、设置:focus状态样式：
input[type="search"]:focus {
border-color: #007AFF;
box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.2);
}
