Input Type Search Styling

by moob

HTML

<h4>Input Type Search Styling</h4>
<input type="search" results="5" placeholder="Search" autosave="some_unique_value_for_this_field" />

CSS

input[type=search] {
    -webkit-appearance: textfield;/* remove webkits default (rounded box) */
    border:2px solid #777;
    border-radius:4px;
    padding:2px;
    font-size:16px;
    box-shadow:1px 1px 2px 0px rgba(0,0,0,.3) inset;
    -webkit-transition: width 0.25s ease-in-out;
    -moz-transition: width 0.25s ease-in-out;
    -o-transition: width 0.25s ease-in-out;
    transition: width 0.25s ease-in-out;
    width:10%;
    min-width:100px;
}
input[type=search]:focus {
    outline:none;
    border-color:red;
    box-shadow:1px 1px 2px 0px rgba(0,0,0,.3);
    width:100%;
}

/* to hide the decorations 
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 {
  display: none;
}
*/

/* to add your own */
xxxx input[type="search"]::-webkit-search-cancel-button {

  /* Remove default */
  -webkit-appearance: none;
    
  /* Now your own custom styles */
  height: 10px;
  width: 10px;
  background: red;
  /* Will place small red box on the right of input (positioning carries over) */

}