CODEWITHSUNDEEP
cssinternet-explorer-10
Niet the Dark Absol
Niet the Dark Absol

Reputation: 324630

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

It's a useful feature, to be sure, but is there any way to disable it?
For instance, if the form is a single text field and already has a "clear" button beside it, it's superfluous to also have the X. In this situation, it would be better to remove it.

Can it be done, and if so, how?

Upvotes: 776

Views: 329165

Answers (6)

ClemPat
ClemPat

Reputation: 49

To hide arrows and cross in a "time" input :

#inputId::-webkit-outer-spin-button,
#inputId::-webkit-inner-spin-button,
#inputId::-webkit-clear-button{
    -webkit-appearance: none;
    margin: 0;
}

Upvotes: 1

Wallace Sidhrée
Wallace Sidhrée

Reputation: 11597

I would apply this rule to all input fields of type text, so it doesn't need to be duplicated later:

input[type=text]::-ms-clear { display: none; }

One can even get less specific by using just:

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

I have used the later even before adding this answer, but thought that most people would prefer to be more specific than that. Both solutions work fine.

Upvotes: 114

TomXP411
TomXP411

Reputation: 939

I think it's worth noting that all the style and CSS based solutions don't work when a page is running in compatibility mode. The compatibility mode renderer ignores the ::-ms-clear element, even though the browser shows the x.

If your page needs to run in compatibility mode, you may be stuck with the X showing.

In my case, I am working with some third party data bound controls, and our solution was to handle the "onchange" event and clear the backing store if the field is cleared with the x button.

Upvotes: 11

ducdhm
ducdhm

Reputation: 1952

You should style for ::-ms-clear (http://msdn.microsoft.com/en-us/library/windows/apps/hh465740.aspx):

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

And you also style for ::-ms-reveal pseudo-element for password field:

::-ms-reveal {
   display: none;
}

Upvotes: 76

jimp
jimp

Reputation: 17487

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

This worked better for me:

.someinput::-ms-clear {
  width : 0;
  height: 0;
}

Upvotes: 277

Ry-
Ry-

Reputation: 224904

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

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

Upvotes: 1304

Related Questions