如何在 MS Edge 和 IE 中隐藏密码输入
Tri*_*tan 19 html css internet-explorer input microsoft-edge
我现在找到了一个答案：当我添加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 中测试。
右边的眼睛是我自定义添加的眼睛，另一个是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>
Dee*_*SFT 29
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.
从版本 92 开始，当您在字段中键入内容时，它仍然会显示在 Edge 中。根据Edge 文档，解决方案是
::-ms-reveal {
display: none;
}
他们还展示了自定义按钮的方法
| 归档时间： |
|
| 查看次数： |
13023 次 |
| 最近记录： |