CSS 中的 Boostrap 焦点输入和图标

Question

如何创建对两个元素的关注？

<div class="form-group">
<label class="control-label"></label>
<div class="col-sm-10">
<input type="text" class="form-control">
<span class="loop-icon form-control-feedback"></span>
</div>
</div>

无焦点

我想得到这样的东西 结果

我不想使用javascript

Answer 1

您可以使用同级选择器"+"来选择下一个元素。

.inp:focus + .icon{
color:red;/* can use any color*/
}

此代码将在输入聚焦时选择输入的同级，即图标类，

form-group{
position:relative;
}
.icon{
position: absolute;
right: 35px;
top: 11px;
}
.inp{
padding:right:40px;
}
.inp:focus + .icon{
color:red;/* can use any color*/
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
<label class="control-label"></label>
<div class="col-sm-10">
<input type="text" class="form-control inp">
<span class="fa fa-search form-control-feedback icon"></span>
</div>
</div>