WebKit(Safari)中input type=search为何出现左侧额外内边距？

这是WebKit内核浏览器（尤其是Safari桌面版和iOS Safari）里很常见的一个布局坑——WebKit给input[type="search"]内置了一套专属的默认用户代理样式，哪怕你设置了-webkit-appearance: textfield来消除默认搜索框的特殊外观，某些隐性的默认样式还是会残留，导致它和type="text"的input布局不一致。

具体原因 #

Safari的默认UA样式针对input[type="search"]做了这些特殊处理：

• 自带额外的padding-left值，用来预留默认搜索放大镜图标的位置
• 会渲染一个隐藏的伪元素::-webkit-search-decoration（搜索图标的容器），即使图标没显示，这个伪元素也会占据左侧空间
• 部分版本还会设置默认的text-indent，进一步偏移输入内容的位置

你提供的代码里，虽然给.input设置了统一的padding: 8px 20px，但Safari默认的input[type="search"]属性选择器权重比类选择器更高，所以默认的左侧内边距会覆盖你的自定义设置。

解决方法 #

要让两种类型的input布局完全一致，需要手动重置这些WebKit专属的默认样式，以下是几种实用方案：

方案1：提升自定义样式权重（推荐）

不用!important，通过组合选择器提高权重，直接覆盖默认样式：

/* 针对搜索框单独重置，确保权重高于默认UA样式 */
.input[type="search"] {
  padding: 8px 20px;
  /* 移除默认搜索图标占位伪元素 */
  -webkit-search-decoration: none;
  /* 重置文本缩进 */
  text-indent: 0;
}

方案2：强制覆盖样式（快速解决）

如果不想调整选择器权重，可以用!important强制应用你的内边距设置：

.input[type="search"] {
  padding: 8px 20px !important;
  -webkit-search-decoration: none;
  text-indent: 0;
}

方案3：全局重置搜索框样式

如果项目里有大量搜索框，可以写一个全局重置规则，避免重复代码：

input[type="search"] {
  -webkit-appearance: textfield;
  box-sizing: border-box; /* 确保内边距不会撑大元素尺寸 */
  -webkit-search-decoration: none;
  text-indent: 0;
}

之后再给具体类设置自定义内边距，就不会和默认样式冲突了。

验证用代码示例 #

修改后的完整代码可以直接在Safari中测试：

<style>
.input { 
  padding: 8px 20px; 
  -webkit-appearance: textfield; 
  box-sizing: border-box;
}
.input[type="search"] {
  -webkit-search-decoration: none;
  text-indent: 0;
}
</style>
<div><input type="text" placeholder="Search" class="input" /></div>
<div><input type="search" placeholder="Search" class="input" /></div>

内容的提问来源于stack exchange，提问作者tekstrand