Search Input Styles

by Kyle Mitofsky

HTML

<h2>Search Input Styles</h2>

<label >
  default
  <input type="search" value="query">  
</label>


<label >
  without x
  <input type="search" value="query" class="hide-clear" >  
</label>





<div style='position:fixed;bottom:0;left:0;background:lightgray;width:100%;padding:3px;'>
  About this question on SO: <br>
  <a href='https://stackoverflow.com/a/57701803/1366033'>
    How do I remove all default Webkit search field styling?
  </a>
</div>

CSS

body {
  padding: 0.5em 2em;
}
label {
    display: block;
    margin-bottom: 1rem;
    font-size: 1.2rem;
}

input {
    display: block;
}

input[type=search] {
    font-size: 1.3rem;
    padding: 2px 7px;
    border-radius: 4px;
    box-shadow: none;
    border: 1px solid #d6d6d6;
    background: #efefef;
}

/* 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; 
}