18
<input type="search" />
input[type="search"]
{
   -webkit-appearance: searchfield
}

makes the clear(x) button appear when you type something in the input, but how do you make the same thing happen in Firefox?

Thanks!

Ke.
  • 515
  • 1
  • 5
  • 7
  • Javascript solution to this can be found here - http://stackoverflow.com/questions/6258521/clear-icon-inside-input-text – dust Feb 02 '16 at 23:00

2 Answers2

13

Firefox has been dragging their feet on this for years and years. Contrary to the other answer, there is still (as of late 2017) no native way of including a clear button on an input. You can of course insert your own and style it manually, in which case you'd do well to use

input[type="search"]::-webkit-search-cancel-button { display: none }

to avoid having the native clear button show up on browsers that support it.

Coderer
  • 25,844
  • 28
  • 99
  • 154
-3

-moz-appearance: <appearance>

Non Standard

This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

MDN Documentation

Rafael
  • 7,605
  • 13
  • 31
  • 46
  • 1
    doesn't seem there are options for searchfield for -moz-appearance ? – Ke. Jan 23 '15 at 17:38
  • there are tons of values for `` click the link to the documentation and look at all the acceptable values. – Rafael Jan 23 '15 at 19:16
  • @Rafael and what apperance do you suggest ? – zb' Sep 11 '15 at 05:49
  • This does not work. Documentation clearly says: "The -moz-appearance CSS property is used in Gecko (Firefox) to display an element using a platform-native styling based on the operating system's theme." This is not what the OP wants. – Sven R. Kunze May 30 '16 at 10:59
  • The following does not work on Windows: – xorcus Nov 18 '16 at 08:50