入力フィールドのフォーカスにグリフコンのスタイルを変更します。

Question

ユーザーが入力フィールドにフォーカスすると、グリフコンの色を変更します。どんな助けもありがとうございます。

<div class="form-group inner-addon left-addon"> 
<i class="glyphicon glyphicon-user userglyphicon"></i> 
<input class="form-control user" name="username placeholder="Username"> 
</div> 

Answer 1

私はinputと​​の位置を逆転させているので、私たちは兄弟として​​にアクセスすることができます。 inputフィールドの前に​​を入れて

は、私がflexboxとしてform-groupを定義し、要素を再配置するorderを使用しました。

.form-group1, 
 
.form-group2 { 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
.form-group1 input, 
 
.form-group2 input { 
 
    order: 2; 
 
} 
 

 
.form-group1 i, 
 
.form-group2 i { 
 
    order: 1; 
 
    padding-right: 0.5em; 
 
} 
 

 
.form-group1 input:focus+i { 
 
    color: red; 
 
} 
 

 
.form-group2 input:focus+i { 
 
    color: blue; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<div class="form-group1 inner-addon left-addon"> 
 
    <input class="form-control user" name="username" placeholder="Username" /> 
 
    <i class="fa fa-user-o" aria-hidden="true"></i> 
 
</div> 
 
<br> 
 
<div class="form-group2 inner-addon left-addon"> 
 
    <input class="form-control user" name="username" placeholder="Username" /> 
 
    <i class="fa fa-user-o" aria-hidden="true"></i> 
 
</div>