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][1]:


```css
/* 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][2]





    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>




[1]: https://blog.maximerouiller.com/post/remove-the-x-from-internet-explorer-and-chrome-input-type-search/
[2]: https://jsfiddle.net/KyleMit/bhd7u81L/

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?