<input type="search"> not styling

Ok so on the end I found a github forum: https://github.com/h5bp/html5-boilerplate/issues/396

Were they written that its a bug in Safari and I should add this piece of code to my styles:

input[type="search"] {
  -webkit-appearance: textfield;
}

and it fixed it!


Use appearance property to avoid propietary stylizing and then you are able to style it:

input[type=search]{
   -moz-appearance: none;/* older firefox */
   -webkit-appearance: none; /* safari, chrome, edge and ie mobile */
   appearance: none; /* rest */
}

More info:

  • https://developer.mozilla.org/docs/Web/CSS/-moz-appearance
  • https://caniuse.com/#search=appearance