In this simple example I am changing the image when you select the input. With this technique you can switch between two images one gray and the other red.
The trick here is to use the brother selector + and put the div after the input, so when you select the input he catches the brother who is the div thus .input-wrapper input:focus + div { ... }
NOTE: Here I made changing the image, so there is a "delay" between the exchange because you have to download the other image and then display it. The right thing here would be to use background-position and make a position change in style sprite to prevent this lag. Here is a very didactic link about Sprites
To better understand see below the working example.
.input-wrapper {
position: relative;
}
.input-wrapper input {
position: relative;
padding-left: 3.25em;
box-sizing: border-box;
height: 2rem;
}
.input-wrapper input:focus, .input-wrapper input:active{
border-color:red;
}
.icone {
position: absolute;
left: 0.5rem;
top: 0.16em;
width: 2em;
height: 1.5em;
background-image: url(http://placeskull.com/16/16);
background-size: cover;
z-index: 100;
}
.input-wrapper input:focus + div, .input-wrapper input:active + div {
background-image: url(http://placecage.com/16/16);
}
<form method="post" id="form">
<div class="input-wrapper">
<input type="text" placeholder="Usuário" id="usuario" name="usuario"/>
<div class="icone icone-user"></div>
</div>
</form>
Is your icon a PNG or GIF type image? Or is it an SVG? Or is it a Fontawesome or Glyphicons type Fonts framework?
– hugocsl