0

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

David W
  • 10,062
  • 34
  • 60

3 Answers3

5

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.

David W
  • 10,062
  • 34
  • 60
3

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.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Andy Sterland
  • 1,872
  • 1
  • 14
  • 19
  • That's at least helpful insofar as I don't have to worry about why I *don't* see them in the style pane! Now if I could figure out why we see them in these other specific cases... – David W Aug 19 '14 at 16:11
1

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

Mr. Alien
  • 153,751
  • 34
  • 298
  • 278
Suresh Karia
  • 17,550
  • 18
  • 67
  • 85
  • if that's not the right syntax, then someone might need to make an amendment to the answer here, http://stackoverflow.com/questions/11805562/remove-x-button-in-input-metro, which was an accepted answer using that syntax. I'm even more confused now - and the alternate suggestions haven't made any difference. Thanks nonetheless for trying to help! – David W Aug 19 '14 at 14:22
  • Tried both code that i ve written here? okay then looking for other solutions! – Suresh Karia Aug 19 '14 at 14:23
  • Yes, and keep in mind this is also against IE11, not IE10, so if that rings any bells... :) – David W Aug 19 '14 at 14:24
  • Okay have you gone through http://msdn.microsoft.com/en-us/library/windows/apps/hh465498.aspx this link? – Suresh Karia Aug 19 '14 at 14:25
  • yes, pretty familiar with building CSS, have a rather substantial set of sheets for this site, just encountering difficulty in one test case with IE11. We are now beginning to suspect it is a one-off issue/bug pertaining to the browser version, also noting very slight UI differences in the Dev Tools pane. – David W Aug 19 '14 at 14:31