The WebKit browsers (and IE) come with an additional “clear/cancel the field” icon (x) when the input is not empty.
It is a good, native UX feature, but sometimes we want to remove it usually because we want to create our custom solution.
In WebKit Based Browsers
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
display: none;
}
In Internet Explorer
input[type="search"]::-ms-clear {
display: none;
height: 0;
width : 0;
}
input[type="search"]::-ms-reveal {
display: none;
height: 0;
width : 0;
}
As you see, we have to use vendor-specific pseudo-elements for the customization or removal.
References
