0
497
ViewsCómo ocultar el ojo de una entrada de contraseña en MS Edge e IE
Ahora encontré una respuesta: simplemente funciona cuando agrego display: none !important; . No sé, qué es exactamente lo que bloquea la display: none; pero si alguien más tiene este error, intente agregar !important y verifique que la entrada sea un campo de contraseña.
Pregunta inicial:
Tengo una entrada de contraseña con un botón "mostrar contraseña" agregado personalizado. Ahora quiero eliminar el botón de contraseña que agregan MS Edge e IE. Ya probé:
input[type="password"]::-ms-reveal, input[type="password"]::-ms-clear { display: none; }y
input::-ms-reveal, input::-ms-clear { display: none; } El ::ms-clear está funcionando y elimina la pequeña x donde el usuario puede borrar la entrada. Pero ::ms-reveal no funciona. Probado en IE 11, MS Edge basado en Chromium y el MS Edge más nuevo que no está basado en Chromium.
MS Edge, basado en cromo , IE 11
El ojo de la derecha es mi ojo agregado personalizado, el otro es el ojo agregado por IE o Edge.
Aquí está mi estilo de entrada:
/* 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; }y el 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>2 answers
Answer question0
Intenté probar ambos códigos en IE 11, el navegador heredado MS Edge, el navegador MS Edge Chromium y Firefox.
Funcionó de mi lado y no muestra el botón Revelar contraseña (Ojo).
Código probado:
<!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>Salida en el navegador IE 11:
Salida en el navegador heredado de MS Edge:
Salida en el navegador MS Edge Chromium:
Revisé la documentación y encontré esta información.
No estándar:
Esta función no es estándar y no se encuentra en una vía estándar. No lo use en sitios de producción frente a la Web: no funcionará para todos los usuarios. También puede haber grandes incompatibilidades entre las implementaciones y el comportamiento puede cambiar en el futuro.
La compatibilidad del navegador solo se muestra para la versión IE 10.