It's common for web developers to provide their users with the capability to clear text entered into an input with one click and have that same consistent interaction across browsers. This can cause redundancy and possibly confusion for the user when the browser already implements a clearing mechanism such as IE10+ and Microsoft Edge. If you have your own clearing mechanism that you want to use instead of using vendor defaults but don't remove these then you end up with potential overlap of content.

To remove the clearing mechanism in IE10+/MS Edge use the ::-ms-clear pseudo class. Below is a pen that shows you a very simple example of the problem and how to solve it.

If you don't have access to IE10+/MS Edge here is a screenshot of the above pen:

Screenshot of redundant x

This is a very simple example, but we've seen examples of this where the custom UI even overlaps the text or creates confusing UI because the clearing mechanism overlaps other symbols (checkmarks, loading icons, etc) that the web developer is trying to provide to their user.


1,284 0 6