Remove Ie11's "Clear Field" X Button on Windows 8

Remove IE11's clear field X button on Windows 8

I had the same issue and the most of the css didn't help me to remove the clear button.
I solutioned this by simply setting width and height to 0 (plus display none)

.someInputdisplay::-ms-clear {display: none; width:0; height:0;}

I hope this might be helpful!

Remove IE10's clear field X button on certain inputs?

Style the ::-ms-clear pseudo-element for the box:

.someinput::-ms-clear {
    display: none;
}

Remove X button in input - Metro

Details are here:
http://msdn.microsoft.com/en-us/library/windows/apps/hh465498.aspx

You need to use the -ms-clear pseudo element, and style it either as you need it, or display none it:

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

Note that you likely want to not display none it, since this removes the easy-to-touch X that removes the current input.

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

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;
}

Remove 3D press effect Internet Explorer button

Had the same problem right now... It's a bit late, so I don't know whether the answer would still be applicable.

My solution was to put the button's text within a span element then set the style to transform: translateY(1px);. And no more unnecessary press effect. I was a bit apprehensive before trying it, as it would mess with FF, Chrome, and Safari for Windows. But weirdly, they seem to ignore it (for now at least). Tested on 28, 27, and 5.1 respectively. Also, I'm using IE 10.

Good luck

---

Related Topics