Bootstrap: Prepended input: outline around prepended element

Question

I have a prepended input like this:

http://jsfiddle.net/swQa4/

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

How can i achieve, that the blue outline (showing when focused) goes around the prepended symbol?

Edit: Similar to the search field at github repos (e.g. https://github.com/cloudera/repository-example)

Answer 1

The input element is that which has the :focus pseudo selector attached so the easiest way to get it around everything is to extend the input element to the size which you want the blue aura to show.

What this means is that you'll have to position the .add-on on top of the input element.

Here's a crude example on JSFiddle which might interfere with Bootstrap slightly more than you'd like but obviously the CSS can be refined to avoid this.

All I've done is add the following

.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;
}

Answer 2

Allows Click on Icon for Input

This fiddle has been tested in IE9+ (should work lower), FF, and Chrome. Unlike the z-index solution of some other answers here, it allows for the icon to be clicked for input to occur. It is actually quite simple in how it works.

.input-prepend {
    border-radius: 4px;
    background: white;
}
.input-prepend .add-on {
    margin-right: -28px;
}

.input-prepend input {
    border-radius: 4px;
    background: none;
    padding-left: 34px; /*28 for icon, 6 for normal padding*/
} 

Explanation

The icon's negative right margin causes the input to overlap it. The input has been given all the border-radius again, but it's background is set to none so that the icon can be seen. Additional right padding is added to input to accommodate the icon. Finally, the wrapper is given border-radius as well and the final background color is applied to the wrapper so that the input will still have it's white background against some other background colored container (as the fiddle illustrated).

Update: If you don't want the inset shadow on the icon

This is the most cross browser friendly way I could find to hide the inset shadow you mentioned in your comment. Some browsers will not honor pointer-events and therefore a small part of the icon area will not be recognized for trigger of input.

.input-prepend:before,
.input-prepend:after{
    content: '';
    display: block;
    top: 1px;
    left: 1px;
    width: 24px;
    height: 4px;
    border-radius: 4px 0 0 0; 
    border: 2px solid #eee; /* match icon background */
    border-width: 2px 0px 0px 2px;
    position: absolute;
    z-index: 2;
    pointer-events: none; /* for those browsers that honor */
}
.input-prepend:before {
    width: 4px;
    height: 24px;
    top: 4px;
    border-radius: 0 0 0 4px;
}