Bootstrap: pre-entry: outline around added item

Question

I have additional input:

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 a blue outline (showing when focused) passes around a predefined symbol?

Edit: looks like a search field in github repositories (e.g. https://github.com/cloudera/repository-example )

Answer 1

I changed the solution Ben Swinburne found to work with added and added fields:

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

Answer 2

An input element is one that has a pseudo-selector :focus , so the easiest way to cover it is to expand the input element to the size you want to show with a blue aura.

This means that you will need to position .add-on top of the input element.

Here is a rough example on JSFiddle that might prevent Bootstrap a bit more than you would like, but obviously CSS can be fine-tuned to avoid this.

All I did was 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 3

Allows you to click the icon to enter

This fiddle has been tested in IE9 + (should work below), FF and Chrome . Unlike the z-index solution of some of the other answers here, it allows you to click the input icon. This 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*/ } 

Description

The negative right margin icon causes input overlap it. The input again received all border-radius , but the background parameter is set to none so that the icon can be seen. An extra right padding is added to input to place the icon. Finally, the wrapper is set to border-radius , and the final background color is applied to the wrapper, so that input will still have a white background against some other color container (as shown in the example of the violin).

Update: if you do not want the insert shadow on the icon

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

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