How can I print a dollar symbol inside(or before) the input box?

Question

The field below retrieves hourly pay rate from user input. How can I display a "$" sign inside (or before) the input field where the user types in the hourly pay rate?

<tr>
<td>Hourly Pay Rate</td>
<td><input type = "number" name = "HPR" min="0" step="0.01"  required></td>
</tr>

Possible duplicate of [HTML text input field with currency symbol](http://stackoverflow.com/questions/2913236/html-text-input-field-with-currency-symbol) — soorapadman, Jan 25 '16 at 05:06

score 13 · Answer 1 · edited Jun 21 '18 at 12:35

13

.dollar{
 display:inline-block;
 position: relative;
 }
.dollar input{
 padding-left:15px;
 }
.dollar:before {
 position: absolute;
    content:"$";
    left:5px;
 top:2px;
  }

<div class="dollar"><input type="number"></div>

edited Jun 21 '18 at 12:35

CerebralFart

3,336
5
26
29

answered Sep 28 '17 at 20:07

Cris

2,824
24
23

score 1 · Answer 2 · answered Jan 25 '16 at 05:23

1

.dollar::before {
    content: "$";
    padding: 0 5px;
    text-align: center;
}

<div class="dollar">
<input type ="text">
</div>

answered Jan 25 '16 at 05:23

dham_tharan

11
3

score 0 · Accepted Answer · answered Jan 25 '16 at 04:58

Not sure what you are asking for :

first one will just put a "$"sign before the input type

<tr>
<td>Hourly Pay Rate</td>
<td>$<input type = "number" name = "HPR" min="0" step="0.01"  required></td>
</tr>

second one will put a "$" inside the input type and will disappear once user start typing.

<tr>
<td>Hourly Pay Rate</td>
<td><input type = "number" placeholder="$" name = "HPR" min="0" step="0.01"  required></td>
</tr>

score 0 · Answer 4 · answered Jan 25 '16 at 05:01

0

Before input box you can try this:

<td>Hourly Pay Rate($):</td> <td><input type = "number" name = "HPR" min="0" step="0.01" required></td>

answered Jan 25 '16 at 05:01

Bijal

132
1
8

How can I print a dollar symbol inside(or before) the input box?

4 Answers4