Remove 'x' Input Decoration In Microsoft Edge (formerly Project Spartan)
Solution 1
It turns out that the CSS had been broken since it was originally written, and this wasn't working in IE 10+ either.
Since fixing the CSS, Microsoft Edge (formerly Project Spartan) is behaving the same as IE10+ and not displaying the 'x' in input fields.
Solution 2
Also you can use type="text"
in input field to remove that X
Martin Costello
Principal Engineer at Just Eat Takeaway.com, specialising in .NET and C#.
Updated on June 30, 2022Comments
-
Martin Costello almost 2 years
In the CSS of a website I'm currently working on we use the following CSS to hide the 'x' button that Internet Explorer 10 and 11 add to input fields for users to clear their contents:
input::-ms-clear { display: none; }
Viewing the same website in the first build of Microsoft Edge (formerly codenamed "Project Spartan") on Windows 10 Build 10049 this CSS has no effect. This isn't surprising as Microsoft Edge is breaking away from the legacy of Internet Explorer, but I want to achieve the same effect.
What is the equivalent CSS required for Microsoft Edge to not render this?
-
Zanon about 9 yearsI could not get it.
::-ms-clear { display:none; }
was not working for IE10? If not, what selector have you used? -
Martin Costello about 9 yearsWe have something like this in a LESS file we compile our CSS from:
.my-class { input { &::-ms-clear { display: none; } } }
-
Nateowami almost 5 yearsAs far as I can tell, in Edge 42.17134.1.0, adding or removing
type="text"
has no effect.::-ms-clear{display:none;}
does work though. -
mmonteirocl over 3 yearsI'm using a input type text and still appearing the X