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.