0

He echo un Input y le puesto como fondo un icono (€) con CSS. El caso es que al escribir se sobrescribe encima. Habría alguna forma de que tuviera un tope?

introducir la descripción de la imagen aquí

Que quede asi y que pueda seguir escribiendo sin solapar el icono:

introducir la descripción de la imagen aquí

1
  • 2
    Agrega el código css y el html correspondiente a ese input así podemos ayudarte
    – ramirozap
    Commented el 13 may. 2019 a las 12:06

2 respuestas 2

1

Puedes asignar un tamaño al padding derecho sabiendo que va a estar el icono, tendrás que calcular la distancia que quieres. Algo así:

input{
  padding-right: 30px;
}
1
  • Es exactamente lo que necesitaba, muchas gracias! Commented el 14 may. 2019 a las 6:14
0

puedes usar Pseudoelementos para agregar el prefijo, usas un label para poder estilizar bien un input, y agregas una clase CSS por la moneda o prefijo que quieras.

Esto tambien se puede hacer por javascript

.inputcss{
  border:1px solid grey;
}

.inputcss input{
  border:none;
  outline:none;
  background-color:transparent;
}

.usd::before{
  content:'$';
  margin-right:6px;
}

.eur::before{
  content:'€';
  margin-right:6px;
}
<label class="inputcss usd"><input type="text" /></label>
<label class="inputcss eur"><input type="text" /></label>

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.