Moving or configuring ::-ms-clear in Internet Explorer 10

Question

In IE10, a focused textbox containing a value will have a little x added to the right of them. This x allows a user to click on the textbox in order to clear its value.

Other questions have touched on removing this feature from the user's view, but I wanted to maintain the feature in addition to adding my own icon to the right of the textbox, such as a search icon. Unfortunately, those icons end up colliding, so I needed to determine a way to move the icon and my searches never turned up any results.

The question that I kept trying to answer: what other properties can be used with the IE10+ ::-ms-clear pseudo-element?

Answer 1

UPDATE: As the other answerer pointed out, the MS documentation has been updated as June 19, 2013 to include all of the properties available to ::-ms-clear. It's unclear if this applies to IE10 rather than the currently forthcoming IE11, so I will leave the rest of the answer below.

For completeness, they have also updated the documentation for ::-ms-reveal, which appears to be the exact same as ::-ms-clear.

The answer below at least applies to IE10.

---

I cannot find an exhaustive list, which lead me to experimentation:

::-ms-clear {
   margin: *; /* except margin-left */
   background: *;
   color: *;
   display: none|block;
   visibility: *;
}

Unfortunately, I was not able to trick IE's developer mode (F12) into showing me the ::-ms-clear properties in the style tree, so I had to try things by hand and reload the page in order to experiment. I even tried cheating by adding onblur=this.focus(), but that did not work.

CSS properties that did something, and seemed useful:

• margin: The margin gave me a way to shift it from the right side of the textbox. I shifted it by the size of my icons, plus 1-3 pixels to give a buffer. Only margin-left does not seem to work.
• background: The background of just the x. Applying any background settings puts your desired content behind it; it does not replace the x!
• color: Controls the color of the x.
• display: As the question that got me here notes, none will hide the x.
• visibility: Seems to work as one would expect similar to display.

You can combine the color and background to replace the x with a different background image so long as it fits within the given size of the x, which appears to be around 20px, but that is just me eyeballing it.

::-ms-clear {
    color: transparent;
    background: no-repeat url("../path/to/image") center;
}

CSS properties that did something, but did not seem useful:

• padding: It affects the x, but never as I actually expected its effect (everything seemed to hide the icon, or at least shift it out of view).
• position: Identical behavior as padding. Admittedly, I am much more of a programmer than a designer, so this may be my own shortcoming.

CSS properties that I guessed might do something, but that did nothing at all:

• text-align
• float

Adding other CSS pseudo-elements does not affect ::-ms-clear. Specifically, I tried ::after and ::before on it with content: "y", and neither one got a result.

Obviously it depends on the size of the companion icon that you intend to apply to the textbox, but I use 14-16px icons and I found that margin-right: 17px gave the x a clear gap, which shifts the x to the left of my right-aligned icon. Interestingly, margin-left seems to have no effect, but you can use a negative value for margin-right.

The actual CSS that I ended up using, which prevented my icon from being covered by the x.

[class^="tbc-icon-"]::-ms-clear, [class*=" tbc-icon-"]::-ms-clear {
    margin-right: 17px;
}

My icons all share the same base name, tbc-icon-, which means that the ::-ms-clear pseudo-element is automatically applied to all of them whenever they are applied. In all other cases, the pseudo-element behaves in its default manner.

Of interest, ::-ms-reveal seems to behave the same way, and if you were going to apply icons to password fields (far less likely I expect), then you can follow the above example:

[class^="tbc-icon-"]::-ms-clear, [class*=" tbc-icon-"]::-ms-clear,
[class^="tbc-icon-"]::-ms-reveal, [class*=" tbc-icon-"]::-ms-reveal {
    margin-right: 17px;
}

Answer 2

One list is available on MS site, at least. http://msdn.microsoft.com/en-us/library/windows/apps/hh465740.aspx

(But maybe I misunderstood the question.)