title: Stop chrome from auto styling input type=search
body: <p>Is there anyway to prevent Chrome from styling the <code>input type=search</code>. I can style the input fine when it is a <code>input type=text</code> although once I change this to a HTML5 search it boxs all styles I have applied to the input. </p>
  
  <p><strong>Type = text</strong></p>
  
  <p><img src="https://i.stack.imgur.com/9UklL.png" alt="text"></p>
  
  <p><strong>Type = search</strong> </p>
  
  <p><img src="https://i.stack.imgur.com/L42Tp.png" alt="serach"></p>
  
  <p>Updated answer with reset properties</p>
  
  <pre><code>input[type="search"] {
      -webkit-appearance: textfield;
  }
  
  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;
  }
  </code></pre>