39
votes

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?

2
I guess this makes you the first person to ask a question about Spartan :)Josh Crozier
Cannot reproduce on my build - it works just fine for me. ::-ms-clear has nothing to do with IE legacy. It is a new, non-standard feature introduced in Windows 8 and IE10.BoltClock♦
Well, what I meant more was that anything IE-specific/non-standards would likely work differently in Project Spartan. My understanding that Project Spartan is trying to shed the legacy of Internal Explorer and its perception, hence different User Agent, name, standards-only etc.Martin Costello
I would say that ::-ms-clear isn't so much IE-specific as it is Windows-specific. Project Spartan still has to implement it by virtue of being a part of Windows, since Windows will have to make use of EdgeHTML to render HTML/CSS-based Windows apps. Anyway, do you have a reproducible test case?BoltClock♦
Project Spartan hasn't been released yet, so this question is premature. On that note, have you tried just input {}?TylerH

2 Answers

27
votes

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.

2
votes

Also you can use type="text" in input field to remove that X