<input type=“search”> no longer shows cancel button (x) under firefox

Question

I found that <input type=“search”> only works in Chrome and IE, but not in Firefox. How can I make <input type=“search”> show the cancel button (x) in Firefox?

Answer 1

Webkit derived browsers put in an x to clear a value. Firefox does not. However firefox supports this feature, but it does nothing about it and you need to style it your self to show the X button in firefox.

Following link will help you to achieve the goal: HTML Textbox with a clear button in Pure CSS and without JavaScript

Answer 2

While the accepted answer is working as it can be seen in the codepen, I feel the need to explain how this is working and what to be aware of. As it took me quite some time to get it working as expected.

1. For anybody who was wondering how the clear is working type="reset" is causing this.
   Read more about it here

elements of type reset are rendered as buttons, with a default click event handler that resets all of the inputs in the form to their initial values.

2. This brings us to the second point of what to be aware of. As the docs explains, the input or button of type reset will only work within a form. However, this creates a problem when having multiple inputs in a form, as all of them will be reset.
   Another cavity would be the fact, that while fixing the clear button on firefox this will now produce multiple clear buttons in all the other browsers that do have support for it.

3. A little feature is that the css content also accepts a url(). This means that for instance custom svg's can be used as a clear icon.