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.

curren

Answer 1

Twitter bootstrap 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

Answer 2

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

Answer 3

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

Answer 4

Heres an easy plugin for this https://github.com/stuartchaney/bootstrap3-money-field