Si encuentras algún problema con tu código o trabajo, recuerda probar siempre en un entorno de testing antes aplicar el código al proyecto final.
Solución:
Considere la posibilidad de simular un campo de entrada con un fijo prefix o sufijo usando un lapso con un borde alrededor de un campo de entrada sin bordes. Aquí hay un ejemplo básico de lanzamiento:
.currencyinput
border: 1px inset #ccc;
.currencyinput input
border: 0;
Usa un padre .input-icon
división Añadir opcionalmente .input-icon-right
.
Alinee el icono verticalmente con transform
y top
, y establecer pointer-events
a none
para que los clics se centren en la entrada. Ajustar el padding
y width
según sea apropiado:
.input-icon
position: relative;
.input-icon > i
position: absolute;
display: block;
transform: translate(0, -50%);
top: 50%;
pointer-events: none;
width: 25px;
text-align: center;
font-style: normal;
.input-icon > input
padding-left: 25px;
padding-right: 0;
.input-icon-right > i
right: 0;
.input-icon-right > input
padding-left: 0;
padding-right: 25px;
text-align: right;
A diferencia de la respuesta aceptada, esto conservará el resaltado de validación de entrada, como un borde rojo cuando hay un error.
Ejemplo de uso de JSFiddle con Bootstrap y Font Awesome
Puede envolver su campo de entrada en un lapso, que position:relative;
. Luego agregas con
:before
content:"€"
su símbolo de moneda y hacerlo position:absolute
. JSFiddle de trabajo
HTML
CSS
.input-symbol-euro
position: relative;
.input-symbol-euro input
padding-left:18px;
.input-symbol-euro:before
position: absolute;
top: 0;
content:"€";
left: 5px;
Actualizar
Si desea colocar el símbolo del euro en el lado izquierdo o derecho del cuadro de texto. JSFiddle de trabajo
HTML
CSS
.input-euro
position: relative;
.input-euro.left input
padding-left:18px;
.input-euro.right input
padding-right:18px;
text-align:end;
.input-euro:before
position: absolute;
top: 0;
content:"€";
.input-euro.left:before
left: 5px;
.input-euro.right:before
right: 5px;
Puntuaciones y reseñas
Tienes la posibilidad dar recomendación a este ensayo si lograste el éxito.