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