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.

This post helped you out? Why not buy me a coffee?

Amount
Your message for me
Tags: click the x to clear the field, chrome add on for clear text, jquery input x delete, html input cross, how to remove cross icon on text box internet explorer, ms edge remove input delete icon, how to change input search cross, how to hide cross icon in input, hide ie11 textbox clear, how to hide the cross mark in textbox in jsp, hide the clear button in html5 text input razor, how to remove x mark from textbox, how to remove x marks from ie links, html cross arrow showing in text field in ie browser, html input ie remove clean button, html input text remove x button in ie, html textbox remove x, ie input clear icon, edge text field x, edge text field clear, edge input search remove, chrome x in text input field, cross button in input text in lightning in edge, css input remove x clear, x appears in search box edge, datatable search input with adding x to remove text not show in firefox or chrome, disable the cross in text input edge, edge add cross to input fields, edge browser clear imput field event, edge browser remove cross button from search box, edge clear input style, edge disable x in textfield, edge disable x inputs, edge has a cross coming in input fields, edge html input x
How to fix Openssl Heartbleed vulnerability
How to Remove Facebook Albums from Gallery App on Samsung Galaxy S3 or S4

Comments

  1. Thank you. I had to change the IE examples from:

    input[type=text]

    to

    input[type="search"]

    Now it works.

  2. clearable feature of HTML 5 text box not working in Google Chrome PLEASE help me out

  3. sudarsan Pradhan
    August 5, 2015 - 3:56 pm

    “add this to bottom of your css:” means??…still m facing same problem.

  4. Hi,
    I heave created the web application, every functioanlites working fine in google chrome except for the below:
    Search input field is not getting clear. It shows the login name inside it. Also wriiten jquery scripts. Everthing is working fine on mozilla but not on google. Why is that?

  5. Ahhhh….thank you

  6. its working…thanks alot :):):).

Leave a Reply

Your email address will not be published / Required fields are marked *