Removing clear and reveal password icons from IE10

问题:

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?

回答1:

The following CSS worked for me

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

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

回答2:

Two questions. First, are you sure your CSS is correct as the following CSS works for me:

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

Second question: Are you running IE10 in IE9 mode or below under Developer Tools. If so, this selector doesn't appear to work and IE10 still inserts the password eye. I'm looking for a resolution to that issue now.

回答3:

The answers given are good solutions when you are not running in compatibility mode. This should work great:

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

Unfortunately there are few good solutions when you are running in compatibility mode. As you can see here, those css selectors do not work in compatibility mode: https://connect.microsoft.com/IE/feedback/details/783743

You could try something like covering it with an image. Depending on the the context of how your application is used and how many people you need to roll it out to, you could also edit the registry to disable the reveal/clear features in IE. You can do that like so:

1. Open Notepad.exe

2. Add this to the file:

   Windows Registry Editor Version 5.00 [HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Microsoft\Internet Explorer\Main] "DisablePasswordReveal"=dword:00000001

3. Save it as DisablePwPeekW7.reg

4. Double click the file you just made, accept. Login and verify.

See here for more info: https://superuser.com/questions/578611/remove-eye-symbol-from-windows-7-ie10-password-field