How to add a currency sign inside a textbox field?

andy - 13 Jan, 2019 24081 Views 0 Comment

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"/>

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.

		padding:10px 20px;
		border:solid 1px #ccc;

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.


There are no comments available.

Write Comment
0 characters entered. Maximum characters allowed are 1000 characters.

Related Articles

How to draw a circle in CSS?

In this article, we are going to learn how to draw a circle in CSS. Firstly what needs to do is to create a CSS class called circle.