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>

CSS：选择相邻输入时的跨度颜色

1 个答案: