How to remove “X” from search input field on Chrome and IE

On input fields that are type “search” on HTML5 browsers add some a little blue “X” at top right side that is actually a clear button. It would clear user search input if user clicks on that “X” or if he presses ESC on keyboard. It’s a useful feature, to be sure, but for some stylish search forms it just doesn’t fit and can look quite ugly. While working on one project this became a problem and I was a looking for a way to disable it?

Here’s how it looks like on average field:
input type search with X
Well doesn’t look bad but if you style that box a bit it can look quite ugly…

The first solution was to simply replace type=”search” with type=”text” but that would be just too easy. And why the hell they added search type if I can’t use it! So I was looking for some other solutions. Clearly different browsers have different approaches.

To remove “X” from all search input fields in IE, simply add this to bottom of your css:

input[type=text]::-ms-clear {  display: none; width : 0; height: 0; }
input[type=text]::-ms-reveal {  display: none; width : 0; height: 0; }

To remove “X” from search input field on Chrome Browser (and all it’s mutations), simply add this to bottom of your css:

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

The following CSS code should remove that clear button on all search fields on page:

input[type=text]::-ms-clear {  display: none; width : 0; height: 0; }
input[type=text]::-ms-reveal {  display: none; width : 0; height: 0; }
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { display: none; }

I have tested this in following browsers IE, Firefox, Chrome and Opera.

Added on May 26th 2014:
I have discovered another Chrome bug/issue that is really annoying in case you have a custom design and you don’t want Chrome to mess with it at all. It happens on all auto-complete forms where Chrome adds yellow background color to the autocomplete fields. Sample picture from WordPress loign page (but it happens on other fields too):

chrome yellow field bug

The solution is easy and all you need to do is to add this code into your CSS and change the color (if needed):

input:-webkit-autofill {
-webkit-box-shadow:0 0 0 50px #ffffff inset;
}

Useful links that can help you solve this problem:

If you have any questions or comments feel free to comment using the comment box below.

Tags: how to remove browser defauult close buutton for inipt box in Ie11, jquery disable cross input, x-form-display-field-default x-field-form-focus x-ie10p, remove x from input box edge, how to remove close symbol from asp textbox, how add clear cross button in input field, how to remove clear caret from search input, Remove “X” button at the end of a TextBox radcontrol, css edge input field x, input x clear, jquery add clear icon in textbox, how to remove cross in input feild in html, internet explorer 11 x at end of text field, how to remove cross in prompt box in Ie in javascript, how to remove cross sign from input tag css, how to remove X from input text in edge by css, how to restore the little x to clear fields in internet explorer, html don\t want to see x in input box in IE, html input x clear, ie input x, html hide cancel button on input, how to hide the cancel button in textbox in edge, browser allows you to click x to delete information in text box not in chromium version of edge, chrome select box has an x that clears it how to remove, css clear button, css edge input x button, css input remove x, dateTimeEntry remove entry with the x, delete input x html, edge automatic x on search fields, edge browser adds clear x to input, event on clicking cross button on input field, form input default disable x clear, hide delete icon in textbox of html, how to fix x through search boxes