前缀货币符号与背景，在文本框字段前

Question

我必须创建一个文本字段，如下所示：

在我的快速初步更改之后，我达到了以下要点。我不太关心边界，而是关注货币符号的背景。

代码（我必须修改代码段才能在在线工具中使用）：

.currencySpan {
    position: relative;
    top: 2px;
    left: -160px;
    background-color: #ddd;
}

.currencyText {
    padding-left: 40px;
    display: inline;
    height: 40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="form-group">
        <div class="icon-addon addon-md" style="vertical-align:top;">
            <input type="text" placeholder="0.00" class="form-control currencyText" id="paymentAmount">
            <span class="currencySpan">$</span>
        </div>
    </div>

有关我如何获得货币背景的任何建议吗？

Answer 1

您可以对输入组使用Bootstrap实现。请参阅链接 http://getbootstrap.com/components/#input-groups

或者，如果你想做纯CSS方式，你可以看到这个bin

http://jsbin.com/xaqeheyini/edit?html,css,output