0
270
VisualizaçõesColocar el icono de visibilidad de contraseña dentro del campo de contraseña
Tengo este siguiente código.
<div class="login-password"> <label for="password" class="form-label" >Enter your password</label > <input id="loginPassword" type="password" class="form-control" placeholder="Enter your password" /> <i class="bi bi-eye-slash" id="togglePassword" style="margin-left: -30px; cursor: pointer" ></i> </div>Cuando hago esto, el ícono de visibilidad de la contraseña se coloca como en la imagen que se muestra a continuación.
¿Cómo coloco el ícono de visibilidad dentro del campo de contraseña?
·
Juan Pablo Isaza
2 Respostas
Responde à pergunta0
Usando el inicio de sesión de marketwatch.com como ejemplo, tendría que hacer que la propiedad css 'posición' sea "absoluta" para la etiqueta <i>. Esto le permitirá colocarlo dentro del cuadro de entrada. Tal vez algo como esto:
.bi-eye-slash { width: 25px; height: 25px; position: absolute; z-index: 200; top: 28px; right: 10px; cursor: pointer; }
·
Juan Pablo Isaza
Relatório
0
Encontré la respuesta a mi propia pregunta. Bueno, tenemos que agrupar la entrada y el ícono es la forma de hacerlo, y debajo está el código.
.input-group-addon i { margin-left: -30px; cursor: pointer; z-index: 200; position: absolute; font-size: large; color: #6c757d; } <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css" /> <div class="login-password"> <label for="password" class="form-label" >Enter your password</label > <div class="input-group"> <input id="loginPassword" type="password" class="form-control" placeholder="Enter your password" /> <div class="input-group-addon"> <i class="bi bi-eye-slash" id="togglePassword"></i> </div> </div> </div>
·
Juan Pablo Isaza
Relatório
Responde à pergunta