Remove 'x' Input Decoration In Microsoft Edge (formerly Project Spartan)

css internet-explorer-11 windows-10 microsoft-edge
Martin Costello picture Martin Costello · Apr 1, 2015 · Viewed 16k times · Source

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?

Answer

Martin Costello picture Martin Costello · Apr 18, 2015

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.

Related questions

How to write a CSS hack for IE 11?

How can I hack or write css only for IE 11? I have a website that looks bad in IE 11.I just search here and there but didnt find any solution yet. Is there any css selector?

Read More
CSS Grid Layout not working in IE11 even with prefixes

I'm using following HTML markup for my grid. <section class="grid"> <article class="grid-item width-2x height-2x">....</article> <article class="grid-item">....</article> <article class="grid-item">....</article&…

Read More
Flexbox Not Centering Vertically in IE

I have a simple web page with some Lipsum content that is centered on the page. The page works fine in Chrome and Firefox. If I reduce the size of the window, the content fills the window until it can't …

Read More