How do I put a clear button inside my HTML text input box like the iPhone does?

by

Nowadays with the <input type="search"> element, it’s pretty simple:

<input type="search" placeholder="Search..."/>

Supported browsers will automatically render a usable clear button in the field by default.

plain HTML5 search input field

The clear button is a ::-webkit-search-cancel-button CSS pseudo-element automatically inserted by Webkit/Blink-based browsers (though it’s technically still a non-standard feature).

If you use Bootstrap, you’ll have to add a CSS override to force the pseudo-element to show:

input[type=search]::-webkit-search-cancel-button {
    -webkit-appearance: searchfield-cancel-button;
}

bootstrap search input field

Officially, the -webkit-search-cancel-button psuedo-element is non-standard and should not be relied upon as a built-in HTML feature across browsers.

Notably Firefox does not render the clear button by default as of version 110, but they have plans to enable it eventually: https://bugzilla.mozilla.org/show_bug.cgi?id=1654288. You can check up-to-date browser compatibility information on MDN or CanIUse.com.

The most reliable, future-proof, cross-browser approach is to use a form with an explicit <input type="reset"/> element nearby to allow clearing the Search form with a button. This also makes it easier to add accecibility hints and style the clear button directly with CSS.

<form action="/search">
  <input type="search" placeholder="Search..."/>
  <input type="reset" value="X" alt="Clear the search form">
  <input type="submit" value="Search">
</form>

Search with manual input reset button appended

Extras: Safari/WebKit browsers can also provide extra features when using type="search", like results=5, enterkeyhint="...", and autosave="...", but they also override many of your styles (e.g. height, borders) . To prevent those overrides, while still retaining functionality like the X button, you can add this to your css:

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

See the MDN Documentation, CanIUse.com, or CSS-Tricks.com for more complete and up-to-date info about the features provided by <input type="search"/> in browsers today.

More Related Contents:

  1. How do I hide the address bar on iPhone?
  2. How to have html popup appear over main html page?
  3. Preserve browser window aspect ratio while shrinking [closed]
  4. Change from (+) symbol to (-) after click (function(){
  5. How can i create html automatic change page? [duplicate]
  6. Can you style an html radio button to look like a checkbox?
  7. Changing element style attribute dynamically using JavaScript
  8. How to get browser width using JavaScript code?
  9. Programmatically selecting text in an input field on iOS devices (mobile Safari)
  10. How to make div fixed after you scroll to that div?
  11. How to detect a long touch pressure with javascript for android and iphone?
  12. Ignore mouse interaction on overlay image
  13. HTML table with fixed headers and a fixed column? [closed]
  14. how to change the background image of div using javascript?
  15. HTML Alignment Issue in one machine only (both IE8)
  16. Setting minimum size limit for a window minimization of browser?
  17. make canvas as wide and as high as parent
  18. I want to show list items as 2 or more columns (dynamic alignment)
  19. How to create dashed circles with uniform spacing?
  20. Creating Drop Down Menu on click CSS
  21. Modal image galleries – multiple images
  22. show/hide html table columns using css
  23. Set focus and cursor to end of text input field / string w. Jquery [duplicate]
  24. Override the -webkit-search-cancel-button
  25. How can I make an image carousel with only CSS?
  26. HTML5 Drag and Drop – No transparency?
  27. CSS: Select element only if a later sibling exists
  28. input:invalid css rule is applied on page load
  29. How to show calendar popup when input[type=”date”] is on focus
  30. How can I reorder elements with JavaScript?

Leave a Comment