在输入字段的焦点上更改glyphicon的样式

Question

当用户专注于输入字段时，我想更改glyphicon的颜色。任何帮助表示赞赏。

<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和glyphicon的排名，因此我们可以作为兄弟访问glyphicon。

要将glyphicon放在input字段的前面，我将form-group定义为flexbox并使用order重新定位元素。< / p>

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;