When using an input with type="search"
why does Safari add a few extra pixels of padding to the left side of the value/placeholder of the field?
<input type="search" placeholder="Search" />
(remember to view in 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>
You need to remove the styling for the -webkit-search-decoration
pseudo element.
.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>