CSS change icon color when input is focused

Question

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 )

Answer 1

You can use input:focus + .fa css selector do accomplish the task. Notice that I've changed the to come after input element.

See more about the plus css selector

More about css selectors

See updated fiddle here

@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;
}