为什么输入类型=搜索导致Webkit上的额外填充（Safari）

Question

当使用带有type="search"的输入时，为什么Safari会在字段的值/占位符的左侧添加一些额外的填充像素？

<input type="search" placeholder="Search" />

（记得在Safari中查看）

.input {
  padding: 8px 20px;
  -webkit-appearance: textfield;
}

<div><input type="text" placeholder="Search" class="input" /></div>
<div><input type="search" placeholder="Search" class="input" /></div>

Answer 1

您需要删除-webkit-search-decoration伪元素的样式。

＆＃13;

＆＃13;

.input {
  padding: 8px 20px;
  -webkit-appearance: textfield;
}
.input::-webkit-search-decoration {
  -webkit-appearance: none;
}

＆＃13;

<div><input type="text" placeholder="Search" class="input" /></div>
<div><input type="search" placeholder="Search" class="input" /></div>

＆＃13;

＆＃13;

＆＃13;