CSS change icon color when input is focused
13,090
You can use input:focus + .fa
css selector do accomplish the task. Notice that I've changed the <span class="fa fa-user"></span>
to come after input element.
See more about the plus css selector
More about css selectors
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,900);
@import "https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css";
input {
padding: 5px;
border-radius: 20px;
border: 1px solid #cccccc;
-webkit-box-shadow: inset 0px 0px 27px -8px rgba(0,0,0,0.75);
-moz-box-shadow: inset 0px 0px 27px -8px rgba(0,0,0,0.75);
box-shadow: inset 0px 0px 27px -8px rgba(0,0,0,0.75);
}
input:focus {
outline: none;
border: 1px solid #c0392b;
color: c0392b;
}
input:focus + .fa {
color: #c0392b;
}
.input-icons {
position: relative;
margin: 5px 100px 5px 100px;
}
.input-icons > input {
text-indent: 17px;
font-family: "Lato", sans-serif;
}
.input-icons > .fa-user {
position: absolute;
top: 7px;
left: 7px;
font-size: 15px;
color: #777777;
}
.input-icons > .fa-lock {
position: absolute;
top: 7px;
left: 7px;
font-size: 15px;
color: #777777;
}
<div class="input-icons">
<input type="text" placeholder="Username">
<span class="fa fa-user"></span>
</div>
<div class="input-icons">
<input type="password" placeholder="Password">
<span class="fa fa-lock"></span>
</div>
Author by
DeCroY
Updated on July 12, 2022Comments
-
DeCroY almost 2 years
I want the user icon and the lock icon to change color when the input is focused but I don't know how to do could anyone help me please ( I want the icon color to #c0392b )
<div class="input-icons"> <span class="fa fa-user"></span> <input type="text" placeholder="Username"> </div> <div class="input-icons"> <span class="fa fa-lock"></span> <input type="password" placeholder="Password"> </div>
CSS
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,900); @import "https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font- awesome.min.css"; input { padding: 5px; border-radius: 20px; border: 1px solid #cccccc; -webkit-box-shadow: inset 0px 0px 27px -8px rgba(0,0,0,0.75); -moz-box-shadow: inset 0px 0px 27px -8px rgba(0,0,0,0.75); box-shadow: inset 0px 0px 27px -8px rgba(0,0,0,0.75); } input:focus { outline: none; border: 1px solid #c0392b; color: c0392b; } input:focus > .fa-user { color: #c0392b; } .input-icons { position: relative; margin: 5px 100px 5px 100px; } .input-icons > input { text-indent: 17px; font-family: "Lato", sans-serif; } .input-icons > .fa-user { position: absolute; top: 7px; left: 7px; font-size: 15px; color: #777777; } .input-icons > .fa-lock { position: absolute; top: 7px; left: 7px; font-size: 15px; color: #777777; }
Check out JSFiddle for a preview JSFiddle