CSS меняет цвет значка при фокусировке ввода

Я хочу, чтобы значок пользователя и значок замка меняли цвет при фокусировке ввода, но я не знаю, как это сделать, может кто-нибудь мне помочь, пожалуйста (я хочу, чтобы цвет значка был # 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;
}

Проверьте JSFiddle для предварительного просмотраJSFiddle

Ответы на вопрос(3)

Ваша иконка не находится внутри поля ввода, именно так описан ваш CSS прямо сейчас.

Когда вы ставите диапазон значков после поля ввода, вы можете использовать селектор +, чтобы добавить css к следующему элементу.

Смотрите эту ссылкуhttps://www.w3.org/TR/CSS21/selector.html#adjacent-selectors

 DeCroY22 июн. 2016 г., 10:36
Спасибо за акцию
Решение Вопроса

Ты можешь использоватьinput:focus + .fa Селектор CSS действительно выполняет задачу. Обратите внимание, что я изменил<span class="fa fa-user"></span> идти после элемента ввода.

Узнайте больше оплюс селектор CSS

Больше о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 {
    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>
 DeCroY22 июн. 2016 г., 10:34
Спасибо тебе большое.

ты можешь попробовать это

 <div class="input-pilotage">
   <input type="text">
   <label> date fin : </label>
   <i class="fi-calendar"></i>
 </div>

//css
.input-pilotage input:focus + label {
    color: #005EB8;
}
.input-pilotage input:focus + label + i {
    color: #005EB8;
}

Ваш ответ на вопрос