内容摘要：做搜索框，最怕的不是写不出代码，而是写出来在Chrome里看着挺美，一到Safari就露馅。我上周帮朋友改一个电商站的搜索模块，光那个输入框的圆角和阴影就调了四十分钟。所以下面这些代码，都是踩过坑之后

做搜索框，搜索框最怕的代码不是写不出代码，而是搜索框写出来在Chrome里看着挺美，一到Safari就露馅。代码我上周帮朋友改一个电商站的搜索框搜索模块，光那个输入框的代码圆角和阴影就调了四十分钟。所以下面这些代码，搜索框都是代码踩过坑之后留下来的。

先看结构。搜索框搜索框的代码HTML没什么花头，一个form包住input和button就够了：

<form class="search-box" role="search"> <input type="search" placeholder="搜点什么…" aria-label="站内搜索"> <button type="submit">搜索</button> </form>

注意type="search"而不是搜索框type="text"。移动端键盘会因此显示“搜索”键，代码Safari还会自动给个清除按钮。搜索框有人嫌那个清除按钮丑，代码用-webkit-appearance: none干掉，搜索框我不建议——用户用惯了，你拿掉反而碍事。

CSS部分，我习惯用flex布局，但不会一上来就写display: flex。先处理input本身：

.search-box input {  width: 100%; padding: 12px 16px; border: 1.5px solid #d9d9d9; border-radius: 8px; font-size: 15px; outline: none; transition: border-color .2s; } .search-box input:focus {  border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.15); }

这个box-shadow代替了默认的outline，视觉上更柔和。但别用outline: none就完事——键盘用户按Tab键过来，完全看不到焦点在哪。用box-shadow模拟焦点环，既好看又不丢无障碍。

按钮的位置有两种做法。一种是绝对定位塞进input右边，另一种是flex并排。我选后者，因为input宽度自适应更省心：

.search-box {  display: flex; max-width: 520px; gap: 8px; } .search-box button {  padding: 0 22px; border: none; border-radius: 8px; background: #3b82f6; color: #fff; font-size: 15px; cursor: pointer; transition: background .2s; } .search-box button:hover {  background: #2563eb; }

这里有个细节：input的width: 100%在flex容器里会撑破布局。得加min-width: 0，或者给input设flex: 1。我一般直接写flex: 1 1 auto; min-width: 0;，省得后面出幺蛾子。

再说placeholder。默认颜色太浅，很多设计师要求调深一点。但别用color，用::placeholder伪元素：

.search-box input::placeholder {  color: #9ca3af; opacity: 1; /* Firefox默认会降低透明度 */ }

那个opacity: 1是给Firefox擦屁股的。不写的话，Firefox里placeholder会淡到几乎看不见。

移动端还有个烦人的点：iOS Safari在input聚焦时会自动放大页面，因为字体小于16px。解决办法简单粗暴——把font-size设成16px。或者用maximum-scale=1锁死缩放，但那样用户就没法手动放大了，不推荐。

最后说圆角。有人喜欢全圆角border-radius: 999px，做成胶囊形。好看是好看，但按钮和输入框的圆角得一致，否则接缝处会露出一个像素的锯齿。我试过用overflow: hidden包一层，结果focus时的box-shadow被裁掉了。所以要么都圆，要么都方，别混搭。

整套代码加起来不到40行，但每个属性背后都有具体场景。搜索框这东西，用户一天可能用几十次，手感差一点都能察觉出来。调的时候别光看设计稿，自己在手机和电脑上各敲几遍，比什么都实在。