background div应该只有输入文本的宽度和高度

Question

我希望仅对输入文本字段（无跨距）的.specialDiv具有相同的宽度和高度。 现在看起来像：

但我想要这样：

我想要这个div的实际原因是像背景进度条一样使用它... 我该如何解决这个问题？

http://jsfiddle.net/Yzxy3/345/

Answer 1

我想你不会喜欢这个：

＆＃13;

＆＃13;

.input-group {
  position: relative;
}
.specialDiv {
  background-color: red;
  height: 100%;
  position: absolute;
  width: calc(100% - 78px);
}
.input-group .form-control {
  background: transparent;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <form class="form-horizontal" role="form" action="/product/create" method="POST">
                <div class="form-group">
                    <label for="product_price" class="col-sm-2 control-label">Price</label>
                    <div class="col-sm-4">
                        <div class="input-group">
                            <span class="input-group-addon">$</span>
                            <div class="specialDiv"></div>
                            <input type="text" class="form-control bfh-number" id="product_price" placeholder="Price" data-min="0" data-max="9999999">
                            <span class="input-group-addon">.00</span>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;