Nesse exemplo simples estou trocando a imagem quando vc seleciona o input
. Com essa técnica vc pode alternar entre duas imagens uma cinza e outra vermelha.
O macete aqui é usar o seletor irmão +
e colocar a div
depois do input
, assim quando vc selecionar o input
ele pega o irmão que é a div
dessa forma .input-wrapper input:focus + div { ... }
OBS: Aqui eu fiz trocando a imagem, então tem um "delay" entre a troca pq tem que baixar a outra imagem e depois exibi-la. O mais correto aqui seria usar background-position
e fazr uma troca de posição no estilo sprite
para evitar esse lag. Aqui tem um link bem didático sobre Sprites
Para entender melhor veja abaixo o exemplo funcionando.
.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>