css - Bootstrap : Prepended input: outline around prepended element

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

输入元素是附加了 :focus 伪选择器的元素，因此围绕所有内容使用它的最简单方法是将输入元素扩展到您希望蓝色光环显示的大小。

这意味着您必须将 .add-on 放在输入元素的顶部。

这是关于 JSFiddle 的粗略示例这可能对 Bootstrap 的干扰比您想要的要多一些，但显然可以改进 CSS 来避免这种情况。

我所做的就是添加以下内容

.input-prepend .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 input {
    /* 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 */
    border-radius:4px;
}

.input-append .add-on, .input-prepend .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 #ccc;

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