Campo de entrada de texto HTML con símbolo de moneda

Utilice un div padre .input-icon. Opcionalmente añadir .input-icon-right.

<div class="input-icon">
  <input type="text">
  <i>$</i>
</div>

<div class="input-icon input-icon-right">
  <input type="text">
  <i>€</i>
</div>

Alinee el icono verticalmente con transform y top, y establezca pointer-events en none para que los clics se centren en la entrada. Modifíquese padding y width según proceda:

.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 retendrá el resaltado de validación de entrada, como un borde rojo cuando hay un error.

Ejemplo de uso de JSFiddle con Bootstrap y Fuente Awesome

Puede envolver su campo de entrada en un intervalo, que position:relative;. Luego se agrega con :before content:"€" su símbolo de moneda y hacerla position:absolute. Trabajando JSFiddle

HTML

<span class="input-symbol-euro">
    <input type="text" />
</span>

CSS

.input-symbol-euro {
    position: relative;
}
.input-symbol-euro input {
    padding-left:18px;
}
.input-symbol-euro:before {
    position: absolute;
    top: 0;
    content:"€";
    left: 5px;
}

Actualización Si desea poner el símbolo del euro a la izquierda o a la derecha del cuadro de texto. Trabajando JSFiddle

HTML

<span class="input-euro left">
    <input type="text" />
</span>
<span class="input-euro right">
    <input type="text" />
</span>

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;
 }

Dado que no se puede hacer ::before con content: '$' en las entradas y la adición de un elemento absolutamente posicionado añade html extra - Me gusta hacer a un fondo SVG css en línea.

Es algo así:

input {
    width: 85px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='16px' width='85px'><text x='2' y='13' fill='gray' font-size='12' font-family='arial'>$</text></svg>");
    padding-left: 12px;
}

Produce lo siguiente:

Nota: el código debe estar en una sola línea. El soporte es bastante bueno en los navegadores modernos, pero asegúrese de probar.

Ponga el '$' delante del campo de entrada de texto, en lugar de dentro de él. Hace que la validación de datos numéricos sea mucho más fácil porque no tienes que analizar el ' $ ' después de enviar.

Puedes hacerlo con jQuery.validate () (u otro), agregue algunas reglas de validación del lado del cliente que manejen la moneda. Eso le permitiría tener el ' $ ' dentro del campo de entrada. Pero todavía tiene que hacer la validación del lado del servidor para la seguridad y eso lo pone de nuevo en la posición de tener que eliminar '$'.

Si solo necesitas soporte para Safari, puedes hacerlo así:

input.currency:before {
  content: attr(data-symbol);
  float: left;
  color: #aaa;
}

Y un campo de entrada como

<input class="currency" data-symbol="€" type="number" value="12.9">

De esta manera no necesita una etiqueta adicional y mantener la información del símbolo en el marcado.

 $<input name="currency">

Ver también: Restringir la entrada al cuadro de texto: permitir solo números y punto decimal

Otra solución que prefiero es utilizar un elemento de entrada adicional para una imagen del símbolo de la moneda. Aquí hay un ejemplo usando una imagen de una lupa dentro de un campo de texto de búsqueda:

Html:

<input type="image" alt="Subscribe" src="/graphics/icons/search-button.png">
<input type="text" placeholder="Search" name="query">

Css:

#search input[type="image"] {
background-color: transparent;
border: 0 none;
margin-top: 10px;
vertical-align: middle;
margin: 5px 0 0 5px;
position: absolute;
}

Esto resulta en la entrada en la barra lateral izquierda aquí:

Https://fsfe.org

Ninguna de estas respuestas realmente ayudan si le preocupa alinear el borde izquierdo con otros campos de texto en un formulario de entrada.

Recomiendo colocar el signo de dólar absolutamente a la izquierda alrededor de-10px o 5px izquierda (dependiendo de si lo desea dentro o fuera de la caja de entrada). La solución interna requiere direction: rtl en el css de entrada.

También puede agregar relleno a la entrada para evitar la dirección: rtl, pero eso alterará el ancho del contenedor de entrada para no haga coincidir los otros contenedores del mismo ancho.

<div style="display:inline-block">
 <div style="position:relative">
  <div style="position:absolute; left:-10px;">$</div>
 </div>
 <input type='text' />
</div>

O

<div style="display:inline-block">
 <div style="position:relative">
  <div style="position:absolute; left:5px;">$</div>
 </div>
 <input type='text' style='direction: rtl;' />
</div>

Https://i.imgur.com/ajrU0T9.png

Ejemplo: https://plnkr.co/edit/yshyuRMd06K1cuN9tFDv?p=preview

Para bootstrap sus obras

<span class="form-control">$ <input type="text"/></span>

No use class="form-control" en el campo de entrada.

.currencyinput {
    border: 1px inset #ccc;
    padding-bottom: 1px;//FOR IE & Chrome
}
.currencyinput input {
    border: 0;
}

<span class="currencyinput">$<input type="text" name="currency"></span>

Sí, si está usando bootstrap, esto funcionaría.

.form-control input {
    border: none;
    padding-left: 4px;
}

Y

<span class="form-control">$ <input type="text"/></span>