How can I get rid of horizontal padding or indent

Question

In webkit on mac only, the text in a search input is indented from the left side. Here's a demo. Even after stripping all padding, text-indent, and setting -webkit-appearance to textfield or none, the text is still indented. It looks to be around 10px or so, but the inspector doesn't show any CSS rules (even browser defaults) that seem to apply this style. Any ideas?

<input type="search" value="Search">

-webkit-appearance: textfield;
border: 1px solid #ccc;
padding: 0;
margin: 0;
text-indent: 0;

Answer 1

By default WebKit-based browsers using border-box model for input[type="search"]. And if you using traditional box-sizing (you are if you haven't declared any other model) you may experience strange padding and border behavior. Fix:

input[type="search"] {
box-sizing: content-box;
}

As for -webkit-appearance - try textarea (textfield) and none. In any case test your page on iOS device, to be sure that styling won't be different after input field being in focus (strange behavior, could be bug - i'm using iPhone 4S with stock iOS 6.0)

Answer 2

This is how you really reset the default styling in WebKit:

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

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

After that the padding problem should be gone. If you also want to normalize the cancel button, which isn't there in non-WebKit browsers, add input[type="search"]::-webkit-search-cancel-button as selector for the second rule.