усиление фокуса ввода и значок в CSS

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>