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

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

这是一个简单的插件 https://github.com/stuartchaney/bootstrap3-money-field

Answer 4

您可以设置input-group一个position:relative和absolute positioning input和span更高（比输入的z-index）{ {1}}范围的数字。

您还需要添加z-index input等于padding-left宽度的值

Answer 5

引导程序版本 4 和 5

此功能在版本 3 和 4 之间发生了显着变化。类 input-group-addon 已被删除，以支持在 input-group-text 或 input-group-prepend 中使用 input-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;
}

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

5 个答案:

引导程序版本 4 和 5