CODEWITHSUNDEEP
csssafariwebkit
tekstrand
tekstrand

Reputation: 1493

Why does input type=search cause extra padding on Webkit(Safari)

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>

Upvotes: 3

Views: 1822

Answers (1)

tekstrand
tekstrand

Reputation: 1493

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>

Upvotes: 9

Related Questions