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 7 years now. A WordPress Professional, web developer and designer who intends to guide his readers about Web Design, WordPress, Blogging, Web Development, and more.

Leave a Reply