html - CSS:选择相邻输入时的跨度颜色

Question

我正在尝试创建一个 css 规则，该规则将允许 fa-search 图标仅在选择输入字段时更改颜色:

<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>

我将如何创建此规则？

Answer 1

你要求的不太可能，但这已经足够接近了:

.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>