CSS: Span color when adjacent input is selected

Question

I am attempting to create a css rule that will allow the fa-search icon to change color only when the input field is selected:

<div class="field-icon-prepend">

    <span class="field-icon"><i class="fa fa-search"></i></span>
    <input type="search" id="top-nav-search" name="s" placeholder="Search">

</div>

How would I create this rule?

Answer 1

What you're asking for is not quite possible, but this is close enough:

.fa-search{
  float:left;
  margin: 0 5px 0 0;
}

#top-nav-search:focus + .field-icon .fa-search{
  color: red;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="field-icon-prepend">

    
    <input type="search" id="top-nav-search" name="s" placeholder="Search">
    <span class="field-icon"><i class="fa fa-search"></i></span>

</div>