Menu
I now found an answer: It just works when I add display: none !important;. I dont know, what exactly is blocking the display: none; but if someone else has this error, try to add !important and check that the input is an password field.
Original Question:
I have a password input with a custom added "show password" button. Now I want to remove the password button which is added by MS Edge and IE. I already tried:
input[type="password"]::-ms-reveal, input[type="password"]::-ms-clear { display: none; } and
input::-ms-reveal, input::-ms-clear { display: none; } The ::ms-clear is working and removes the little x where the user can clear the input. But the ::ms-reveal isn't working. Tested in IE 11, MS Edge based on Chromium and newest MS Edge which isn't based on Chromium.
MS Edge, Chromium based, IE 11
The eye on the right is my custom added eye, the other one is the eye added by IE or Edge.
Here is my input styling:
/* BASIC INPUT STYLING */ input, textarea, select { outline: none; border-radius: 6px; box-sizing: border-box; box-shadow: none; font-family: 'Roboto', sans-serif; font-weight: 300; line-height: 1; font-size: 16px; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; color: #222222; background-color: transparent; border: 1px solid #CCCCCC; padding: 18px 22.5px; transition: border-color .15s ease-in-out; width: 100%; } input:focus, textarea:focus, select:focus { border: 1px solid #999999; } .input-small input, .input-small select, .input-small textarea { font-size: 14px; padding: 9px 11.25px; } /* INPUT WITH ICON STYLING */ .input-with-icon { position: relative; } .input-with-icon input, .input-with-icon select { padding-right: 62.5px; } .input-with-icon.input-small input, .input-with-icon.input-small select { padding-right: 32px; } .input-icon-div { height: 51px; border-radius: 6px; background-color: transparent; display: flex; align-items: center; justify-content: center; width: 40px; position: absolute; right: 5px; bottom: 2px; cursor: pointer; } .input-small .input-icon-div { font-size: 14px; height: 27px; width: 25px; } and the HTML:
<div class="input-with-icon"> <input type="password" name="password" id="password" class="" maxlength="255"> <div class="input-icon-div"> <i class="far fa-eye"></i> </div> </div> 
769
Show/Hide eye icon on Microsoft Edge from Settings Then click Settings. On the Settings page, click Passwords. There, you will see a slider in front of “Show the “Reveal Password” button in the password fields.” Toggle it to enable or disable the eye icon in the password field.
The password input type in Microsoft Edge includes a password reveal button. To make sure that the password is entered correctly, a user can click the password reveal button or press Alt + F8 , to show the characters in the password field. You can remove the password reveal control, or customize the control styling.
I tried to test your both codes on the IE 11, MS Edge legacy browser, MS Edge Chromium browser and Firefox.
It worked on my side and it is not showing the Reveal password button (Eye).
Tested code:
<!DOCTYPE html> <html> <head> <style> input::-ms-reveal, input::-ms-clear { display: none; } </style> </head> <body> Password: <input type="password" value="" id="myInput" /><br /><br /> </body> </html>Output in IE 11 browser:
Output in MS Edge legacy browser:
Output in MS Edge Chromium browser:
I check the documentation and found this information.
Non-standard:
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.
Browser compatibility is only shows for the IE 10 version.
130
It still shows in Edge as of version 92 when once you type something in the field. According to Edge docs, the solution is
::-ms-reveal { display: none; } They also show ways to customize the button
35
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
