How do I remove all default Webkit search field styling?

Question

By default, <input type="search" /> renders like a "native" search field on Mac OS X (rounded corners, clear button, etc.). I want to completely remove this custom styling so that the input looks identical to an equivalent text input (<input type="text" />), but while keeping the input type set to search.

I've tried -webkit-appearance: none;, which gets it very close...but there's something funny going on with margins/padding that I can't seem to override, which causes the width of the search field to render ~20px shorter than a text input.

Is there another -webkit- specific property I'm not aware of to totally disable the styling?

Fleming

Answer 1

Try these stylings:

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

Source: http://css-tricks.com/webkit-html5-search-inputs/#comment-82432

Sevenup

instead of display: none; you can also use -webkit-appearance:none; which keeps this crazy vendor prefix rule in it's own space. – Overslaugh

Note that this fixes the outline issues addressed in some common style resets with outline-offset: -2px;. With these rules, the outline-offset is not needed. – Pelargonium

Answer 2

For those that still need to support IE, it's worth mentioning that you need an entirely different set of vendor styles to remove the '×' from Internet Explorer

Per the article Remove the X from Internet Explorer and Chrome input type search:

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

Demo in Stack Snippets & jsFiddle

label, input {display: block; margin-bottom: 1rem;}

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

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


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

Lallage

I would like to add to this answer, its important to keep the IE and Chrome rules separately as they are in this example. If you combine all 6 together, Chrome wouldn't understand IE's rules and vice versa, which in turn makes the whole rule set ignored in both browsers – Themistocles

Answer 3

As of 2023, this can be simplified.

Firefox search field appears as a text field. Only Chrome and Safari change the search field appearance.

• Remove cancel button (Chrome & Safari):

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

• Remove Safari left inner padding under macOS or the magnifying glass on the left under iOS:

[type="search"]::-webkit-search-decoration {
  appearance: none;
}

• Both:

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

• Make the search field to be displayed like a text field under Safari:

[type="search"] {
  appearance: textfield;
  outline-offset: -2px; /* Fix outline style in Safari */
}

(source: https://github.com/necolas/normalize.css/blob/8.0.1/normalize.css#L285-L293)

The -2px "breaks" Chrome :-/

• Some explanations:

-webkit-search-results-button and -webkit-search-results-decoration are not needed because Chrome >= 53 (released in 2016) does not support the results attribute anymore.

Chrome 117 shadow DOM uses only one pseudo-element -webkit-search-cancel-button which is specific to input type="search":

In addition Safari 17.0 shadow DOM uses -webkit-search-decoration which adds a left inner padding under macOS 13.6 or a magnifying glass on the left under iOS 17.0:

Demo:

[type="search"].no-cancel-button::-webkit-search-cancel-button {
  appearance: none;
}

[type="search"].no-decoration::-webkit-search-decoration {
  appearance: none;
}

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

[type="search"].as-textfield {
  appearance: textfield;
  outline-offset: -2px;
}

<input type="search" placeholder="input type='search'">

<br><br>

<input type="search" class="no-cancel-button" placeholder="no cancel button">

<br><br>

<input type="search" class="no-decoration" placeholder="no decoration">

<br><br>

<input type="search" class="no-decoration-no-cancel-button" placeholder="no decoration no cancel button">

<br><br>

<input type="search" class="as-textfield" placeholder="as textfield">

<br><br>

<input type="text" placeholder="input type='text'">

Chalcanthite