In this tutorial you will learn on how to place a currency sign inside a textbox field. We are going to CSS style only. No javascript is required at all. To achieve this, we need to wrap a textbox inside a div tag. We then need to set the position of the div to relative position. Then, we can add a span HTML tag with a currency sign inside the div tag and set the position of the label to an absolute position against the div tag.
Let's get started with the html code first.
<div class="currency-wrap"> <span class="currency-code">$</span> <input type="number" class="text-currency"/> </div>
The next step is to add the CSS style. One thing to remember is we need to add a padding style into the textbox. The reason because we are going to position the currency code in absolute position against the div currency-wrap CSS class and therefore it requires a gap or padding. So in this example, I am going to add 10px on the top and bottom padding of the textbox and 20px padding on the left and right of the textbox.
Here is our css style code.
<style> .currency-wrap{ position:relative; } .currency-code{ position:absolute; left:8px; top:10px; } .text-currency{ padding:10px 20px; border:solid 1px #ccc; border-radius:5px; } </style>
Demo of adding currency code inside a textbox field.
Please see the demo of our example tutorial below.
If you have any question regarding this simple tutorial. Feel free to post your comment below.