Почему тип ввода = поиск вызывает дополнительное заполнение в 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.

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

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