If you’ve tried out any of HTML5′s new input types you’ll probably have noticed that WebKit adds its own default styling to search input fields. This can be a bit of a pain if you’re trying to achieve a particular layout, so you can remove them using the following CSS:
input[type="search"] {
-webkit-appearance: textfield;
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
display: none;
}
Similarly, if you’re browsing the web on an iOS device you’ll notice that it also applies its own appearance to input and textarea elements: rounded corners, grey gradient in the background, etc. This is an even simpler fix, however:
input, textarea {
-webkit-appearance: none;
}
More on appearance can be found at the W3C editor’s draft.