In this article I will explain with an example, how to display Rupee Symbol in TextBox and SPAN in HTML.
Displaying Rupee Symbol in HTML TextBox
The following HTML Markup consists of an HTML DIV and an HTML TextBox. The HTML DIV has been assigned an Image of Rupee symbol.
The HTML DIV is positioned in such a way that the Image is displayed inside the TextBox on left side corner and also padding has been applied to the TextBox so that the Text and Image does not overlap each other.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.rupee-txt
{
padding-left: 12px;
}
.rupee-img
{
position: relative;
left: 17px;
top: 2px;
height: 14px;
width: 10px;
display: inline-block;
background-image: url('rupee.png');
}
</style>
</head>
<body>
<div class="rupee-img">
</div>
<input type="text" class="rupee-txt" value="438" />
</body>
</html>
Displaying Rupee Symbol in HTML SPAN
The following HTML Markup consists of an HTML SPAN. In order to display the Rupee Symbol in HTML, the ASCII code ₹ is used.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<span>₹255</span>
</body>
</html>
Screenshots
Rupee Symbol in HTML TextBox
![Display Rupee Symbol in TextBox and SPAN in HTML]()
Rupee Symbol in HTML SPAN
![Display Rupee Symbol in TextBox and SPAN in HTML]()
Demo
Downloads
