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??
Answer
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.