Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Safari input type search reset/normalize

Tags:

css

Is there a official way on how to reset a search input to make it look the same as a text field in Safari?

screenshot

Safari is adding some annoying padding to the left side which I can't remove.

input {
  -webkit-appearance: none;
  padding: 0;
}
<input type="search" value="abc"><br>
<input type="text" value="abc">
like image 409
petsk Avatar asked Jan 15 '16 00:01

petsk


1 Answers

Found the solution myself.

input {
  padding: 0;
}

input[type="search"] {
    -webkit-appearance: textfield;
}

input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}
<input type="search" value="abc"><br>
<input type="text" value="abc">
like image 93
petsk Avatar answered Nov 16 '22 01:11

petsk