Styling the search input in webkit
On a recent project I had to create a search input that looked the same across all browsers. I wanted to use the new HTML 5 search input, but in Safari, it styles the input for you:
To make this render as a normal input you only need a couple of rules:
input[type=search]
{
-webkit-appearance:textfield;
-webkit-box-sizing:content-box;
}
::-webkit-search-decoration
{
display: none;
}
-webkit-appearance tells the browser to render the search field as it would any other text input field.
::-webkit-search-decoration turns off the space that is created on the left of the input where the recent search dropdown normally is.
