Menu
<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!
216
The easiest way to add an input box with a clear button is to add an input element with the type attribute set to search . Then when we type into the input box, we see the clear button displayed. And we can click on it to clear its value.
To add icon inside the input element the <i> tag and <span> tag are used widely to add icons on the webpages. To add any icons on the webpages or in some specific area, it needs the fontawesome link inside the head tag. The fontawesome icon can be placed by using the fa prefix before the icon's name.
Definition and Usage. The <input type="search"> defines a text field for entering a search string. Note: Remember to set a name for the search field, otherwise nothing will be submitted. The most common name for search inputs is q.
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.
142
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
