[![enter image description here](https://i.stack.imgur.com/lvtxO.gif)](https://i.stack.imgur.com/lvtxO.gif)

```css
.form-field {
  position: relative;
  width: 370px;
  height: 40px;
  margin-left: 40px;
  margin-bottom: 30px;
}
.label {
  position: absolute;
  margin-left: 42px;
  margin-top: 12px;
  width: 58px;
  height: 16px;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: 0.01em;
  color: #757575;
}
.connection-field {
  padding-left: 42px;
  width: 370px;
  height: 40px;
  border-radius: 4px;
  border: 1px solid rgba(33, 33, 33, 0.2);
}
 .connection-field:focus {
   color: #2196f3;
   border-color: 1px solid red;
}
```

```html
<div class="form-field">
<label class="label" for="user_name">Имя</label>
<input class="connection-field" type="text" name="Имя"id="user_name">
<svg class="modal-icon-1">
<use xlink:href="#modal-icon-1"></use>
</svg>
</input>
</div>
```

The color of the input frame does not change when: focus ... border-color - does not change ... here I am writing something - because you see my code is not enough and you need to come up