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 &#8377 is used.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <span>&#8377;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
View Demo
 
 
Downloads
Download Code