Добавление префикса доллара в поле ввода начальной загрузки

Есть ли способ/стиль начальной загрузки для добавления не редактируемого префикса в поле ввода? таких как знак доллара. префикс должен быть включен внутри поля ввода.

в настоящее время я делаю что-то вроде этого, но знак выходит из поля ввода.

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

Ответы

Ответ 1

Twitter bootstrap имеет класс с именем input-group-addon для этой функции.

Вероятно, вам нужен этот

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

Js Fiddle Demo - Basic

Обновление: удаление фона из знака $. Вам просто нужно перезаписать класс input-group-addon

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

Js Fiddle Demo - Without Background

Если вы хотите удалить границу с правой стороны знака $, вы также можете добавить этот css

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

Js Fiddle Demo - Without Border

Ответ 2

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

Ответ 4

Вы можете это сделать, установив position:relative и absolute positioning input и span с более высоким номером z-index для номера.

Также вам нужно добавить значение input a padding-left, равное span width