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
<!-- begin snippet: js hide: true console: false babel: false -->
<!-- language: lang-css -->
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; 
}
<!-- language: lang-html -->
<label >
  default
  <input type="search" value="query">  
</label>
<label >
  without x
  <input type="search" value="query" class="hide-clear" >  
</label>
<!-- end snippet -->