UPDATE . As another respondent pointed out, the MS documentation was updated from June 19, 2013 to include all the properties available for ::-ms-clear . It is unclear whether this applies to IE10 and not to the upcoming IE11, so I will leave the remaining answer below.
For completeness, they also updated the documentation for ::-ms-reveal , which looks exactly the same as ::-ms-clear .
The answer below at least applies to IE10.
I cannot find an exhaustive list that will lead me to experiment:
::-ms-clear { margin: *; background: *; color: *; display: none|block; visibility: *; }
Unfortunately, I was not able to fool the IE developer mode (F12) by showing me the ::-ms-clear properties in the style tree, so I had to try something manually and reload the page to experiment. I even tried to trick by adding onblur=this.focus() , but that didn't work.
CSS properties that did something and seemed useful:
margin : margin gave me a way to move it on the right side of the text box. I moved it to the size of my icons, plus 1-3 pixels to create a buffer. Only margin-left does not work.background : only x background. Applying any background settings puts your desired content behind you; it does not replace x !color : controls the color of x .display : as the question that noticed me here, none will hide x .visibility : It seems to work as one would expect, similar to display .
You can combine color and background to replace x another background image if it matches the given x size, which is apparently about 20px, but that's just me watching it.
::-ms-clear { color: transparent; background: no-repeat url("../path/to/image") center; }
CSS properties that did something but didn't seem useful:
padding : This affects x , but never since I really expected its effect (everything seemed to hide the icon or at least change it from view).position : Identical behavior as padding . Admittedly, I am much more a programmer than a designer, so this may be my own flaw.
The CSS properties that I suggested could do something, but it did nothing:
Adding other CSS pseudo-elements does not affect ::-ms-clear . In particular, I tried ::after and ::before on it using content: "y" , and none of them got the result.
Obviously, this depends on the size of the companion icon that you intend to apply to the text box, but I use 14-16px icons and I found that margin-right: 17px gave x an explicit space that shifts x left of the right-aligned icon to the edge. Interestingly, margin-left does not seem to have any effect, but you can use a negative value for margin-right .
The actual CSS that I used, which prevented my icon from being covered by x .
[class^="tbc-icon-"]::-ms-clear, [class*=" tbc-icon-"]::-ms-clear { margin-right: 17px; }
My icons have the same base name, tbc-icon- , which means that the ::-ms-clear pseudo-element ::-ms-clear automatically applied to all of them when they are applied. In all other cases, the pseudo-element behaves by default.
Interestingly, ::-ms-reveal seems to behave the same, and if you are going to apply the icons to the password fields (which is much less likely I expect), 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; }