Problem
I’d want to add a small icon that, when clicked, clears the text in the INPUT> box.
Instead of having a clear link outside of the input area, this is done to conserve space.
My CSS knowledge is limited… This is a screenshot of how the iPhone appears.
Asked by Hugh Buchanan
Solution #1
It’s really straightforward nowadays with HTML5:
<input type="search" placeholder="Search..."/>
By default, most current browsers will provide an useable clear button in the field.
(If you’re using Bootstrap, you’ll need to add an override to your CSS file.)
input[type=search]::-webkit-search-cancel-button {
-webkit-appearance: searchfield-cancel-button;
}
When using type=”search,” Safari/WebKit browsers can give extra capabilities like results=5 and autosave=”…”, but they also override many of your styles (e.g. height, borders). You may add this to your css to prevent overrides while still preserving functionality like the X button:
input[type=search] {
-webkit-appearance: none;
}
More information about the features provided by type=”search” can be found at css-tricks.com.
Answered by Nick Sweeting
Solution #2
You can use input type=”search”> since HTML5. However, this isn’t always changeable. Here are two kickoff examples if you want complete control over the UI. One includes jQuery, whereas the other does not.
jQuery isn’t technically required; it simply separates the progressive enhancement logic from the source; you may, of course, use plain HTML/CSS/JS instead:
You’ll only wind up with ugly HTML (as well as JS that isn’t cross-browser compatible ;)).
If the look’n’feel of the UI isn’t as important to you as the functionality, then use input type=”search”> instead of input type=”text”>. On HTML5-capable browsers, the (browser-specific) clear button will appear.
Answered by BalusC
Solution #3
HTML5 adds the’search’ input type, which, in my opinion, accomplishes your goal.
Here’s an example in action.
Answered by ThorSummoner
Solution #4
Please take a look at our jQuery-ClearSearch plugin. It’s a user-configurable jQuery plugin, so styling the input field to suit your needs is simple. Simply put it to use as follows:
<input class="clearable" type="text" placeholder="search">
<script type="text/javascript">
$('.clearable').clearSearch();
</script>
Example
Answered by wldaunfr
Solution #5
Unfortunately, you can’t truly put it inside the text box; you can only make it look like it’s inside it, which necessitates the use of CSS:P
Wrapping the input in a div, removing all borders and backgrounds, and styling the div to seem like the box is the theory. Then, following the input box in the code, add your button, and you’re done.
Once you’ve gotten it to function, that is.
Answered by Tom
Post is based on https://stackoverflow.com/questions/2803532/how-do-i-put-a-clear-button-inside-my-html-text-input-box-like-the-iphone-does