如何在 MS Edge 和 IE 中隐藏密码输入 [重复]答案

【问题标题】：How to hide the eye from a password input in MS Edge and IE [duplicate]如何在 MS Edge 和 IE 中隐藏密码输入 [重复]
【发布时间】：2020-08-10 10:18:31
【问题描述】：

我现在找到了答案：当我添加display: none !important; 时它才有效。我不知道到底是什么阻止了display: none;，但如果其他人有此错误，请尝试添加!important 并检查输入是否为密码字段。

原问题：

我有一个带有自定义添加的“显示密码”按钮的密码输入。现在我想删除 MS Edge 和 IE 添加的密码按钮。我已经试过了：

input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
  display: none;
}

和

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

::ms-clear 正在工作，并删除了用户可以清除输入的小x。但是::ms-reveal 不起作用。在 IE 11 中测试，基于 Chromium 的 MS Edge 和不基于 Chromium 的最新 MS Edge。

MS Edge, Chromium based, IE 11

右边的眼睛是我自定义添加的眼睛，另一个是IE或者Edge添加的眼睛。

这是我的输入样式：

/*
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;
}

和 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>

【问题讨论】：

这能回答你的问题吗？ Removing clear and reveal password icons from IE10

标签： html css internet-explorer input microsoft-edge

【解决方案1】：

我尝试在 IE 11、MS Edge 旧版浏览器、MS Edge Chromium 浏览器和 Firefox 上测试您的两个代码。

它在我这边工作，它没有显示“显示密码”按钮（眼睛）。

测试代码：

<!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>

在 IE 11 浏览器中的输出：

MS Edge 旧版浏览器中的输出：

MS Edge Chromium 浏览器中的输出：

我查了documentation，发现了这个信息。

非标准：

此功能是非标准的，不在标准中追踪。不要在面向 Web 的生产站点上使用它：它不会为每个用户工作。之间也可能存在很大的不兼容未来的实现和行为可能会发生变化。

浏览器兼容性仅针对 IE 10 版本显示。

【讨论】：

这与建议副本的答案中的信息相同。

【解决方案2】：

从版本 92 开始，当您在字段中键入内容时，它仍会显示在 Edge 中。根据Edge docs，解决方法是

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

他们还展示了自定义按钮的方法

【讨论】：