By default, <input type="search" /> renders like a "native" search field on Mac OS X (rounded corners, clear button, etc.). I want to completely remove this custom styling so that the input looks identical to an equivalent text input (<input type="text" />), but while keeping the input type set to search.
I've tried -webkit-appearance: none;, which gets it very close...but there's something funny going on with margins/padding that I can't seem to override, which causes the width of the search field to render ~20px shorter than a text input.
Is there another -webkit- specific property I'm not aware of to totally disable the styling?
Try these stylings:
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 {
-webkit-appearance:none;
}
Source: http://css-tricks.com/webkit-html5-search-inputs/#comment-82432
For those that still need to support IE, it's worth mentioning that you need an entirely different set of vendor styles to remove the '×' from Internet Explorer
Per the article Remove the X from Internet Explorer and Chrome input type search:
/* clears the 'X' from Internet Explorer */
input.hide-clear[type=search]::-ms-clear,
input.hide-clear[type=search]::-ms-reveal {
display: none;
width: 0;
height: 0;
}
/* clears the 'X' from Chrome */
input.hide-clear[type="search"]::-webkit-search-decoration,
input.hide-clear[type="search"]::-webkit-search-cancel-button,
input.hide-clear[type="search"]::-webkit-search-results-button,
input.hide-clear[type="search"]::-webkit-search-results-decoration {
display: none;
}
Demo in Stack Snippets & jsFiddle
label, input {display: block; margin-bottom: 1rem;}
/* clears the 'X' from Internet Explorer */
input.hide-clear[type=search]::-ms-clear,
input.hide-clear[type=search]::-ms-reveal {
display: none;
width: 0;
height: 0;
}
/* clears the 'X' from Chrome */
input.hide-clear[type="search"]::-webkit-search-decoration,
input.hide-clear[type="search"]::-webkit-search-cancel-button,
input.hide-clear[type="search"]::-webkit-search-results-button,
input.hide-clear[type="search"]::-webkit-search-results-decoration {
display: none;
}
<label >
default
<input type="search" value="query">
</label>
<label >
without x
<input type="search" value="query" class="hide-clear" >
</label>
