将美元前缀添加到bootstrap输入框

Question

无论如何都有引导方式/样式在输入框中添加不可编辑的前缀？比如美元符号.前缀必须包含在输入框内.

目前我正在做这样的事情,但标志不在输入框中.

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

Answer 1

Twitter引导程序有一个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

Answer 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

Answer 3

引导程序版本 4 和 5

此功能在版本 3 和版本 4 之间发生了显着变化。该类input-group-addon已被删除，以支持在或input-group-text内部使用。input-group-prependinput-group-append

预先添加文本

<!-- 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>

附加文本

<!-- 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>

更改添加文本的背景颜色

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