Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Stop chrome from auto styling input type=search

Is there anyway to prevent Chrome from styling the input type=search. I can style the input fine when it is a input type=text although once I change this to a HTML5 search it boxs all styles I have applied to the input.

Type = text

text

Type = search

serach

Updated answer with reset properties

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;
}
like image 383
John Magnolia Avatar asked Jul 18 '12 09:07

John Magnolia


1 Answers

You could try:

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

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

Does it help?

like image 106
Ana Avatar answered Oct 23 '22 12:10

Ana