CODEWITHSUNDEEP
htmlunicodesymbols
vishalkin
vishalkin

Reputation: 1235

Add Rupee symbol in the text box

How can i add Indian Rupee Symbol inside a text box field and do not use Rs.

Amount: <input name="amount" type="text" size="20" value="Rs. 1.00">

In this i need to show "Rs." in terms of a symbol, as how we use "$".

Upvotes: 1

Views: 14988

Answers (4)

YouBee
YouBee

Reputation: 2071

Try this snippet

css

 .customTextfield input{
 border:unset;
  
}
.customTextfield input:focus{
  outline:unset;
}
.customTextfield{
  border:1px solid #000;
  padding:2px;
}
<span class="customTextfield">
  &#x20B9; <input name="amount" type="text">
</span>

Upvotes: 0

Gurprakash Singh
Gurprakash Singh

Reputation: 1

Just include the following javascript and it will update all the " Rs " to " Rupee Symbol " for you <script src="http://webrupee.anmoul.com/js" type="text/javascript"></script>

or Simply Use rupee symbol Unicode character code &#x20B9

Upvotes: 0

Mr. Alien
Mr. Alien

Reputation: 157384

According to me you shouldn't do this, whether you are saving the value in the database, or you are using to calculate something or anything else, simply store the integer, and than concatenate the Rs. or the rupee sign with the integer. This way it won't trouble you while calculating or storing values.

As far as the rupee symbol goes, you can use &#x20B9;

Demo

Demo 2 (Recommended)

Even Better Solution

I've made a demo from scratch which uses background-image, this way, your text field will indicate that the value is a rupee, also, it will be cross browser.

Demo

Demo 2 (Using background-size to make image tiny)

input[type=text].rupee {
    background-image: url(http://i.imgur.com/Fd7NROx.png);
    border: 1px solid #aaa;
    padding: 5px;
    padding-left: 20px; /* Indent the text values inside textbox */
    background-size: 20px 25px; /* Change symbol size */
    background-repeat: no-repeat; /* So that rupee image doesn't repeat */
}

Upvotes: 4

Bk Santiago
Bk Santiago

Reputation: 1573

use #8360; 

<input name="amount" type="text" size="20" value="&#8360; 1.00">

Upvotes: 0

Related Questions