Remove IE “clear field or cross” X button from inputs field

How to remove or disable cross/clear icon from search input field on Chrome and IE ?

In Internet Explorer and Edge browser,  input type search fields shows a cross icon at top right side that is actually a clear button. When user clicks on that cross(X) icon, it clear the search input. It’s a useful feature, but when you want same styling consistency across all the browser it becomes an issue or bug.

The ::-ms-clear CSS pseudo Property

The ::-ms-clear CSS pseudo-element represents a button (the “clear button”) at the edge of a text <input> which clears away the current value of the <input> element. This button and pseudo-element are non-standard, supported only in Internet Explorer 10 and 11 and Edge 12+, hence the vendor prefix (-ms for Microsoft). The clear button is only shown on focused, non-empty text <input> elements.

To solve this issue you can remove this cross button or icon use ::-ms-clear CSS property.

To remove cross “X” icon from search input field on Chrome Browser , add this to bottom of your CSS

 

 

 

About Vijay Dhanvai

A passionate blogger by heart and mind, I have been working in this field for 10 years now. A WordPress Professional, web developer and designer who intends to guide his readers about Web Design, WordPress, Blogging, Web Development, and more.

3 Comments

  • Ragini says:

    Hi,

    i tried your solution but it didnt worked for me.

    could you please suggest some other solution.

    Thanks,
    Ragini

    • Sure, Can you please share what CSS you have applied, or link of page where you have use this code.

      This button and pseudo-element are non-standard, supported only in Internet Explorer 10 and 11 and Edge 12+, hence the vendor prefix (-ms for Microsoft).

  • Patanjali says:

    This begs the question: Why does a page’s controls have to look and behave exactly the same across several browsers?

    Of course, the principle functionality should be the same, but should one change the way controls behave to make them the same across browsers?

    After all, the vast majority of people will mostly use only one browser, and expect its controls to work the same, no matter which site they visit.

    I think the real issue here is that the designer may have picked up differences in testing across browsers, and perhaps struct on the idea that the all should be the same. That is a very designer-centric, and definitely not user-centric.

    Several years ago, Java web apps had a particular look/feel/behaviour that was consistent across browsers, but unfortunately, was particularly frustrating to anyone used to how their favourite browser worked.

    My suggestion is to let go of what you don’t really have to change, especially given a usage pattern that very, very few users — other than developers — will ever undertake, unless forced to.

Leave a Reply