Html 将美元前缀添加到引导程序输入框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21016472/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding dollar prefix to bootstrap input box
提问by JR Tan
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.
无论如何，是否有引导方式/样式将不可编辑的前缀添加到输入框中？比如美元符号。前缀必须包含在输入框中。
currently I'm doing something like this, but the sign is out of the inputbox.
目前我正在做这样的事情，但标志在输入框之外。
<div class="input-group input-medium ">
<input type="text" class="form-control input-lg" readonly="">
<span class="input-group-btn">
$
</span>
</div>
回答by Sachin
Twitter bootstrap has a class named input-group-addonfor this feature.
Twitter bootstrap 有一个input-group-addon以此功能命名的类。
You probably want this
你可能想要这个
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" placeholder="price">
</div>
Update: To remove the background from the $sign- You just need to overwrite the input-group-addonclass
更新：要从$标志中删除背景-您只需要覆盖input-group-addon该类
.input-group-addon
{
background-color:#FFF;
}
Js Fiddle Demo - Without Background
Js Fiddle Demo - Without Background
If you want to remove the border from right side of $sign, You can add this css as well
如果您想从$标志右侧删除边框，您也可以添加此 css
.input-group .input-group-addon + .form-control
{
border-left:none;
}
回答by rbsthlm
HTML:
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:
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;
}
回答by stuartchaney
Heres an easy plugin for this https://github.com/stuartchaney/bootstrap3-money-field
这是一个简单的插件 https://github.com/stuartchaney/bootstrap3-money-field
回答by n1kkou
You can to this by setting the input-groupa position:relativeand absolute positioningthe inputand the spanwith higher(than input's z-index) z-indexnumber for span.
Also you need to add to the inputa padding-leftvalue equal to span's width
您可以通过设置跨度的input-groupaposition:relative和absolute positioningtheinput和span更高（比输入的 z-index）z-index数字来实现这一点。
您还需要添加到等于的宽度input的padding-left值span
