If you need to view the HTML and CSS, it's available on jsfiddle.
<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;
}
I attempted to create a fake input div to show a green left border, but I realized that when I moved to the next field by pressing tab, the green border wouldn't show. Another issue is that if I try to add a green border to the input in the CSS, it only appears when focused, causing the image icon to jump. Additionally, I wanted to push the icon away with left padding, but nothing happened.
I might be approaching this the wrong way. Any help would be appreciated.