Adding dollar prefix to bootstrap input box

Question

Is there anyway bootstrap way/style to add non-editable prefix into the inputbox? such as the dollar sign. the prefix has to be included inside the input box.

currently I'm doing something like this, but the sign is out of the inputbox.

<div class="input-group input-medium ">
    <input type="text" class="form-control input-lg" readonly="">
    <span class="input-group-btn">
        $
    </span>
</div>

score 95 · Answer 1 · edited Sep 15 '21 at 12:19

95

Twitter Bootstrap Version 3 has a class named input-group-addon for this feature.

You probably want this

<div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control" placeholder="price">
</div>

Js Fiddle Demo - Basic

Update: To remove the background from the $ sign- You just need to overwrite the input-group-addon class

.input-group-addon
{
    background-color:#FFF;
}

Js Fiddle Demo - Without Background

If you want to remove the border from right side of $ sign, You can add this css as well

.input-group .input-group-addon + .form-control
{
    border-left:none;
}

Js Fiddle Demo - Without Border

edited Sep 15 '21 at 12:19

Daly

787
2
12
23

answered Jan 09 '14 at 09:44

Sachin

40,216
7
90
102

This is great but I prefer to remove the grey background from the dollar sign. – JR Tan Jan 09 '14 at 10:12
1

@TanJitRen You can very easily remove the background from the dollar sign by overwriting the class. Look at the updates in my post and here is the fiddle http://jsfiddle.net/s6Xu6/2/ – Sachin Jan 09 '14 at 10:16
nice use of `---` tag – dmSherazi Mar 07 '16 at 00:32

noppe · Answer 2 · 2014-10-29T10:23:38.930

20

HTML:

<div class="col-xs-6" >
    <div class="left-inner-addon">
        <span>$</span>
        <input type="text" class="form-control" placeholder="Amount" />
    </div>
</div>
<div class="col-xs-6" >
    <div class="right-inner-addon">
        <span>$</span>
        <input type="search" class="form-control" placeholder="Amount" />
     </div>
</div>

CSS:

.left-inner-addon {
    position: relative;
}
.left-inner-addon input {
    padding-left: 22px;    
}
.left-inner-addon span {
    position: absolute;
    padding: 7px 12px;
    pointer-events: none;
}

.right-inner-addon {
    position: relative;
}
.right-inner-addon input {
    padding-right: 30px;    
}
.right-inner-addon span {
    position: absolute;
    right: 0px;
    padding: 7px 12px;
    pointer-events: none;
}

jsFiddle

edited Oct 29 '14 at 10:23

answered Jan 09 '14 at 10:00

noppe

397
3
9

Thanks! This is what I need. If twitter bootstrap included this, it will be great. – JR Tan Jan 09 '14 at 10:10
You're welcome! Got a feeling that you didn't want the standard solution already provided by BS... :) – noppe Jan 09 '14 at 10:30
3

js fiddle demo broken not found – Chris Hayes May 23 '14 at 16:53

score 5 · Accepted Answer · answered Jun 29 '21 at 04:19

Bootstrap Versions 4 and 5

This functionality changed significantly between versions 3 and 4. The class input-group-addon has been removed in favor of using input-group-text inside of either input-group-prepend or input-group-append.

To prepend text

<!-- importing Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="input-group">
    <div class="input-group-prepend">
        <span class="input-group-text">$</span>
    </div>
    <input type="text" class="form-control" placeholder="0.00" />
</div>

To append text

<!-- importing Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="input-group">
    <input type="text" class="form-control" placeholder="email" />
    <div class="input-group-append">
        <span class="input-group-text">@gmail.com</span>
    </div>
</div>

To change the background color of the added text

.input-group-text
{
    background-color:#FFF;
}

Doesn't work properly in BS5 - the prepended input ends up with rounded corners on the right. Correct code for BS5 is here: https://getbootstrap.com/docs/5.0/forms/input-group/#basic-example — NickG, Mar 31 '22 at 13:53

score 0 · Answer 4 · answered Jan 09 '14 at 09:44

0

You can to this by setting the input-group a position:relative and absolute positioning the input and the span with higher(than input's z-index) z-index number for span.

Also you need to add to the input a padding-left value equal to span's width

answered Jan 09 '14 at 09:44

n1kkou

3,096
2
21
32

Adding dollar prefix to bootstrap input box

4 Answers4

Bootstrap Versions 4 and 5

Linked