Есть ли способ/стиль начальной загрузки для добавления не редактируемого префикса в поле ввода? таких как знак доллара. префикс должен быть включен внутри поля ввода.
в настоящее время я делаю что-то вроде этого, но знак выходит из поля ввода.
<div class="input-group input-medium ">
<input type="text" class="form-control input-lg" readonly="">
<span class="input-group-btn">
$
</span>
</div>
Twitter bootstrap имеет класс с именем input-group-addon для этой функции.
Вероятно, вам нужен этот
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" placeholder="price">
</div>
Обновление: удаление фона из знака $. Вам просто нужно перезаписать класс 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;
}
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;
}
Это простой плагин для этого https://github.com/stuartchaney/bootstrap3-money-field
Вы можете это сделать, установив position:relative и absolute positioning input и span с более высоким номером z-index для номера.
Также вам нужно добавить значение input a padding-left, равное span width