Fake input textfield - When focus and how to push icon away from left - css

Question

http://jsfiddle.net/g54p4/
HTML and CSS is in jsfiddle in case if you need to see.
<div class="box-input">
<input type="text" placeholder="Email Address" class="input-icon-email cly-pvxl" name="email">
</div>
<div class="box-input">
<input type="text" placeholder="Email Address" class="input-icon-email cly-pvxl" name="email">
</div>
CSS
.box-input{
border-left: 7px solid transparent;
cursor: pointer;
display: block;
vertical-align: middle;
width: 100%;
}
.box-input:hover,
.box-input:focus{
border-left: 7px solid green;
}
.box-input input{
width: 100%;
border: 0;
padding-left: 80px;
}
.box-input input:focus,
.box-input input:hover{
outline: 1px solid #eee;
}
.input-icon-email{
display: inline-block;
position: relative;
vertical-align: middle;
height: 34px;
width: 34px;
background: url('http://mbsales.com/WebAssets/email_icon1.gif') left center no-repeat;
padding-left: 30px;
}
Tried fake input div so that it would display border-left green but realized when go to next field by entering tab, it won't show border-left green. other problem is if try to add border-left green in input css, it will display when focus, and image icon will be jumpy. Also wanted to push the icon away with padding left but nothing happened.
Perhaps might be doing it wrong.
Help appreciated.

Answer 1

You can try this:
working DEMO
add this:
.box-input input{ border-left: 7px solid transparent;}
and return the hover style to the input:
.box-input input:focus,
.box-input input:hover{
outline: 1px solid #eee;
border-left: 7px solid green;
}

Answer 2

You can as well use box-shadow : DEMO outset - DEMO inset
input:focus {
box-shadow: -7px 0 0 0 green;
}
or even
input:focus {
box-shadow: inset 7px 0 0 0 green;
}
This will be added to any borders already here and remains as long as input has focus. ouset box-shadow may change outline renderer from browser to browser , inset should not and inset will drawn hover background if any.