如何在 MS Edge 和 IE 中隐藏密码输入 [重复]
Posted
技术标签:
【中文标题】如何在 MS Edge 和 IE 中隐藏密码输入 [重复]【英文标题】:How to hide the eye from a password input in MS Edge and IE [duplicate] 【发布时间】: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 【参考方案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;
他们还展示了自定义按钮的方法
【讨论】:
以上是关于如何在 MS Edge 和 IE 中隐藏密码输入 [重复]的主要内容,如果未能解决你的问题,请参考以下文章
IE 11(Edge)中输入(文本/隐藏)的值第二次为空,“返回”或history.back()
为啥这个 CSS3 动画在 MS Edge 或 IE11 中不起作用?
为啥运行我的 js resizer 代码会使文档在 IE7 - IE11 和 MS Edge 中超过 100% 的窗口高度和宽度?