I would like so I click on the input change the color of my icon
My form
<form method="post" id="form">
<div class="input-wrapper">
<div class="icone icone-user"></div>
<input type="text" placeholder="Usuário" id="usuario" name="usuario"/>
</div>
....
</form>
I've already tried something like
input.icone {
color:red;
}
input.icone:active , input.icone:focus {
color:red;
}
In this simple example I'm changing the image when you select input . With this technique you can switch between two images one gray and one red.
The trick here is to use the brother chooser + and put div after input , so when you select input it takes the brother who is div this way .input-wrapper input:focus + div { ... }
NOTE: Here I have done changing the image, so there is a delay between the exchange, because it has to download the other image and then display it. The most correct here would be to use background-position and make a position change in sprite style to avoid this lag . Here is a well didactic link on Sprites
To understand better, see the working example below.
.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>Try
.icone:before { color:red; }
or
.icone-user:before { color:red; }
Anyway, just by inspecting the code, I can give a more concrete answer.