Champ de saisie de texte HTML avec symbole monétaire

Question

J'aimerais avoir un champ de saisie de texte contenant le signe "$ " au tout début, et peu importe ce que l'édition se produit sur le champ, pour que le signe soit persistant.

Je serais bien si seulement les chiffres étaient acceptés pour la saisie, mais ce n'est qu'un ajout fantaisiste.

Answer 1

Envisagez de simuler un champ de saisie avec un préfixe ou un suffixe fixe en utilisant une portée avec une bordure autour d'un champ de saisie sans bordure. Voici un exemple de lancement de base :

.currencyinput {
    border: 1px inset #ccc;
}
.currencyinput input {
    border: 0;
}

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

Answer 2

J'ai fini par avoir besoin du type pour rester comme un nombre, donc utilisé CSS pour pousser le signe de dollar dans le champ de saisie en utilisant une position absolue.

<div>
   <span style="position: absolute; margin-left: 1px; margin-top: 1px;">$</span>
   <input type="number" style="padding-left: 8px;">
</div>