How to hide the eye from a password input in MS Edge and IE

html css internet-explorer input microsoft-edge

19,245

Solution 1

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.

Solution 2

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

19,245

Author by

Admin

Updated on June 26, 2022

Comments

Admin almost 2 years

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>