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?
Que quede asi y que pueda seguir escribiendo sin solapar el icono:
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?
Que quede asi y que pueda seguir escribiendo sin solapar el icono:
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;
}
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>