搜索框需用border显式设置宽、样式、颜色三属性并统一border-radius；移动端控制radius≤6px；:focus须用box-shadow替代outline以保障可访问性；必须重置::-webkit-search-cancel-button伪元素样式。
搜索框边框怎么用 border 控制粗细和颜色
默认的 input[type="search"] 在不同浏览器里边框样式不一致，Chrome 会加圆角和阴影，Safari 可能带内阴影，直接写 border: 1px solid #ccc 很容易被 UA 样式覆盖。必须用 border 显式重置全部三属性（宽度、样式、颜色），同时补上 border-radius 统一圆角。
- 别只写
border-color：单设颜色不生效，border-style默认是none - 推荐写法：
border: 2px solid #e0e0e0，比1px更耐看，也更易在高 DPI 屏幕上保持清晰 - 移动端注意：iOS Safari 对
border-radius大于8px的输入框有时会裁剪光标，建议控制在6px以内
聚焦时如何用 :focus 做视觉反馈
:focus 不只是加个边框变色——它得让用户一眼看出“当前可输”，同时不能破坏布局。很多项目直接用 outline: none 然后忘加替代样式，结果键盘用户完全无法感知焦点位置。
- 必须保留可访问性：禁用
outline后，至少用box-shadow模拟焦点环，比如box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.3) - 别只改
border-color：纯颜色变化在弱视或色盲场景下不可靠，建议同步微调border-width或加box-shadow - 避免重绘问题：慎用
transition: all，优先写明具体属性，例如transition: border-color 0.2s, box-shadow 0.2s
为什么搜索框要单独处理 input[type="search"] 伪元素
Chrome 和 Safari 会给 input[type="search"] 自动插入一个 × 清空按钮（::-webkit-search-cancel-button），默认样式突兀，还可能和自定义图标冲突。这个伪元素不显式隐藏，边框和 padding 都可能被它挤变形。
- 清空按钮默认有内边距和背景，必须重置：
::-webkit-search-cancel-button { appearance: none; cursor: pointer; } - 如果用了自定义搜索图标（比如右侧
svg），记得给input加padding-right避开图标区域，否则文字会顶到图标上 - Firefox 不支持该伪元素，所以清除逻辑要兼顾：用 JS 监听
input事件 + 按钮点击，而不是只依赖伪元素
响应式搜索框在小屏上的常见塌陷问题
很多搜索框在手机上变窄后，border-radius 和 padding 没随宽度缩放，导致文字贴边、光标错位，甚至清空按钮被截掉。这不是 CSS 写错了，而是没考虑最小宽度约束和行高适配。
立即学习“前端免费学习笔记（深入）”；
- 设
min-width: 120px（不是100%）：防止在超窄容器里缩成一条线 - 用
em或rem设padding，比如padding: 0.5em 0.75em，比固定px更适应字号变化 - 小屏下慎用
font-size: smaller：会导致行高计算异常，光标高度不对齐，优先用媒体查询微调padding和height
::-webkit-search-cancel-button 的样式重置和 :focus 的可访问性兜底——这两处不处理，视觉再简洁，用起来也会卡顿或不可见。 
