私は、入力フィールドが選択されている場合のみfa-searchアイコンは色を変更することができますCSSルールを作成しようとしています：CSS：スパンの色隣接する入力が選択されている
<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>
を、私はこのルールを作成することになり、どのように？
何を求めていることは十分に可能ではありませんが、これは十分に近いです：
.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は特定のセレクタの前に来る要素には影響しません。ですから、CSSでこれを行うには、スパンの前に入力を置き、 'input：focus + .fa-search'を使って誰かが入力フィールドで選択（またはフォーカス）したときに' .fa-search'に影響を与える必要があります。あなたの現在のマークアップでそれを行うには、javascriptを使用する必要があります。 –
javascriptを使うことができますので、入力検索に焦点を当てるときに 'document.getElementById（" idOfTheSpan "）。className + =" cssOfColoredIcon ";を実行してください。このクラスには次のようにすることができます：' document.getElementById "idOfTheSpan"）。className = document.getElementById（ "idOfTheSpan"）。className.replace （/（？：^ | \ s）cssOfColoredIcon（？！\ S）/ g、 ''） ' –