CODEWITHSUNDEEP
htmlcssinternet-explorer-11ie11-developer-tools
David W
David W

Reputation: 10184

CSS rule for ::-ms-clear pseudo-element not appearing in IE11 Dev Tools, rule not always working?

I have a peculiar problem relating to a CSS issue against an MS-specific pseudo-element in IE11 on Windows 7.

In order to eliminate the "clear/X" button at the right-hand edge of most INPUT elements in an IE11 form, I have added a simple CSS style rule as follows:

INPUT::-ms-clear{
    display: none;
}

This seemed to work just fine - until someone came across the site in question and saw the very buttons this style was supposed to remove. So I started debugging the issue with the IE11 Dev Tools, and when I loaded up the offending page (with no "x" in my instance, as expected) I surely expected to see the style rule above in the "styles" pane - but no such luck.

On a lark, I tried adding this as an inline style within the dev tools, but IE11 indicated it would not apply - crossed out - but I could not find any other style that was trumping it. Disabling ALL styles for the page still left this pseudo-element style disabled. So now, I'm not sure why the "clear" button doesn't appear if my style rule isn't being applied.

I'm stumped. I have three instances of IE11, same version, same install source for that matter, two of which are rendering the same page from the same site in different ways, and apparently honoring (or not honoring??) this style rule inconsistently (or not at all). I'm just not understanding why - or why the rule isn't appearing in the dev tools. Possibly just a browser bug??

Upvotes: 0

Views: 7659

Answers (3)

David W
David W

Reputation: 10184

We discovered the cause of this problem.

When opening up two browsers against the same page on two different sites (localhost and test site), one with the "clear" widget and one without, we also noticed the rendered HTML was different, starting with the DOCTYPE declaration. That turned on a light bulb - emulation mode. Emulation mode told us that the instance of IE on the test box was rendering the page in Compatibility Mode by virtue of it being a site "on our Intranet," and the "Render all sites on Intranet in Compatibility View" option was checked. Unchecked this box, and the "clear" notch then honored our style and disappeared.

Problem solved.

Thanks for everyone's input.

Upvotes: 5

Andy Sterland
Andy Sterland

Reputation: 1936

Alas the IE11 F12 tools don't show ::-ms-clear in the styles panes even if they are applied to the element. Which is something we want to fix.

Upvotes: 3

Suresh Karia
Suresh Karia

Reputation: 18218

I found it's better to set the width and height to 0px. Otherwise, IE10 ignores the padding defined on the field -- padding-right -- which was intended to keep the text from typing over the 'X' icon that I overlayed on the input field.

I'm guessing that IE10/11 is internally applying the padding-right of the input to the ::--ms-clear pseudo element, and hiding the pseudo element does not restore the padding-right value to the input.

Try this code

input[type=text]::-ms-clear{
    width:0;
    height:0;
}

or

input[type=text]::-ms-clear{
    display:none;
}

and read more about ::-ms-clear psuedo element

Upvotes: 1

Related Questions