Stop chrome from auto styling input type=search

css, google-chrome

Solution

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?

Problem

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 Type = search 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; } ```

Original source