css - Removing clear and reveal password icons from IE10

Question

I have this design where the user inputs some text in input type=text and it is validated via jQuery. Now when user inputs some data, IE10 shows an X sign to clear text box however, by design it overlaps the custom designed X image and also the eye icon overlaps the custom design of the password field.

I've tried using ::-ms-clear for input type=text and ::-ms-reveal for input type=password but unfortunately, it does nothing at all. I have read that reveal can only be removed by disabling it from somewhere in system which is of no use.

Can anyone please help me or direct me to fix this issue or tell me how this issue can be solved?

Answer 1

The following CSS worked for me

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

See ::-ms-clear and ::-ms-reveal for extra information.