Как изменить цвет для i при фокусе на input на css?

Question

[Max Shteklya]

Есть таки три блока:

<div class="input"><i class="fa fa-address-book-o" aria-hidden="true"></i><input type="text"></div>
<div class="input"><i class="fa fa-address-book-o" aria-hidden="true"></i><input type="email"></div>
<div class="input"><i class="fa fa-address-book-o" aria-hidden="true"></i><input type="text"></div>

Как при фокусе на <input> поменять цвет для <i>?
Например, цвет <i> серый, но когда поле активное (:focus) <i>стает чёрного цвета (только то і, что рядом с инпутом)

.modal-body .input{
   position: relative;
   margin-bottom: 15px;
}
.modal-body .input input {
   height: 34px;
   font-size: 20px;
   padding-left: 30px;
}
.modal-body .input input:focus {
   outline: none;
}
.input input:focus + .input i.fa{
   color: #ff0000;
}
.modal-body .input i.fa {
   width: 34px;
   height: 34px;
   font-size: 20px;
   line-height: 34px;
   text-align: center;
   margin-right: -34px;
   position: absolute;
   z-index: 1;
   float: left;
   color: #7a7a7a;
}
.modal-body .input i.fa + .modal-body .input input {
   padding-left: 26px;
}

Answer 1

[Андрей]

поменять местами i и input сначала. а потом

input:focus + i {
color: red
}

Comments

[Max Shteklya]

Я прикрепил выше css код, но почему то не работает (все стили работают, кроме именно того фокуса)

[Max Shteklya]

Попробовал поменять местами, ничего не изменилось (кроме того, что тег i стал с другой стороны от инпута)

[Андрей]

нельзя обращаться к родителю и элементу выше по дереву. поменяйте местами в разметке i и input

[Андрей]

BedOmar, https://jsfiddle.net/symuhz53/

[Max Shteklya]

Андрей, спасибо, завтра попробую, если заработает отмечу как решение, большое спасибо!