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

Answer 1

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.

Answer 2

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

Answer 3

The following CSS worked for me

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

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