Bootstrap:Prepended input:围绕前置元素的轮廓

Question

我有一个像这样的前置输入:

http://jsfiddle.net/swQa4/

<div class="input-prepend">
    <span class="add-on"><i class="icon-envelope"></i></span>
    <input type="text" placeholder="Email" />
</div>

我怎样才能实现,蓝色轮廓(显示聚焦时)围绕前置符号？

编辑:类似于github repos的搜索字段(例如https://github.com/cloudera/repository-example)

Answer 1

我修改了 Ben Swinburne 找到的解决方案，使其适用于前置和附加字段：

http://jsfiddle.net/WBJ6H/

<div class="input-prepend input-append input-prepend-inner">
    <span class="add-on"><i class="icon-envelope"></i></span>
    <input type="text" placeholder="Email" />
    <button class="btn" type="button">Copy</button>
</div>

CSS：

.input-prepend-inner .add-on
{
    /* Move the add-on above the input element */
    position: absolute;

    /* The focus brings the input to z-index 2, so needs to be higher */
    z-index: 3;
}

.input-prepend-inner input[type=text]
{
    /* Move the text in the input out from under the add-on */
    padding-left: 32px;

    /* Re apply the border radius which we've made look ugly with the add-on on top.
       The styling is applied specifically to top-left / bottom-left
       to allow .input-append to overwrite the right border-radius side. */
    -webkit-border-top-left-radius: 4px;
    -moz-border-top-left-radius: 4px;
    border-top-left-radius: 4px;

    -webkit-border-bottom-left-radius: 4px;
    -moz-border-bottom-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.input-prepend-inner .add-on
{
    /* Remove the border, input now takes care of this except from the right one */
    border: 0;

    /* Reseparate the add-on from the input */
    border-right: 1px solid rgb(204, 204, 204);

    /* Account for the 1px gap caused by removing the border */
    margin: 1px 0 1px 1px;
}