如何在 MS Edge 和 IE 中隐藏密码输入 [英] How to hide the eye from a password input in MS Edge and IE
问题描述
我现在找到了答案:当我添加 display: none !important; 时它才起作用.我不知道究竟是什么阻止了 display: none; 但如果其他人有这个错误，请尝试添加 !important 并检查输入是否为密码字段.
原始问题:
我输入了一个带有自定义添加的显示密码"的密码输入按钮.现在我想删除 MS Edge 和 IE 添加的密码按钮.我已经试过了:
input[type="password"]::-ms-reveal,输入[类型=密码"]::-ms-clear {显示:无；}和
input::-ms-reveal,输入::-ms-clear {显示:无；}::ms-clear 正在工作并删除了用户可以清除输入的小 x.但是 ::ms-reveal 不起作用.在 IE 11、基于 Chromium 的 MS Edge 和不基于 Chromium 的最新 MS Edge 中测试.
MS Edge 旧版浏览器中的输出:
MS Edge Chromium 浏览器中的输出:
我查看了文档和找到了这个信息.
<块引用>非标准:
此功能是非标准的，不属于标准追踪.不要在面向 Web 的生产站点上使用它:它不会为每个用户工作.之间也可能存在很大的不兼容实现和行为可能会在未来发生变化.
浏览器兼容性仅显示 IE 10 版本.
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>
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.
这篇关于如何在 MS Edge 和 IE 中隐藏密码输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
