0

Buen día!, soy nuevo tanto en la programación como en esta comunidad. Hoy estoy intentando colocar una imagen PNG dentro del campo de input al lado del placeholder. Deseo hacerlo mediante CSS. Muchas gracias!

.login-div__password {
      margin-bottom: 20px;
      border-radius: 10px;
      box-shadow: inset 8px 8px 8px #cbced1, inset -8px -8px 8px #fff;
    }
    
    .login-div__password::before {
      display: block;
      content: "";
      background-image: url(../img/pass.png);
      height: 20px;
      width: 20px;
    }
<input type="text" class="login-div__password" placeholder="Texto">

2
  • ¿Y este código funciona o que resultado da?
    – user128299
    Commented el 28 ene. 2021 a las 3:32
  • nono, no se logra ver la imagen o icono antes del placeholder. nisiquiera aparece
    – FedeB
    Commented el 28 ene. 2021 a las 4:07

1 respuesta 1

0

No es posible agregar imagen de fondo a un input usando la propiedad :before, en este caso lo recomendable seria ingresar todo en un contenedor y agregar una imagen en posición absolute, para que se sobreponga al input, luego con css das los estilos según sea necesario, por ejemplo:

.contenedor-input {
            width: 200px;
        }
        .login-div__password {
            width: 100%;
            height: 30px;
            padding-left: 40px;
            box-sizing: border-box;
        }
        img.input-icon {
            width: 30px;
            position: absolute;
            margin-left: 5px;
            height: 30px;
        }
<div class="contenedor-input">
        <img class="input-icon" src="https://cdn.iconscout.com/icon/free/png-256/email-1818372-1541480.png">
        <input type="text" class="login-div__password" placeholder="Insertar Email">
    </div>

1
  • Muchas gracias por responder! duda solucionada!
    – FedeB
    Commented el 28 ene. 2021 a las 4:38

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.