Осталось оживить декоративное выделение.

В исходном состоянии выделение отсутствует, поэтому сначала изменим его ширину на нулевую. Чтобы декоративное выделение появлялось, когда поле ввода получает фокус, используем CSS-правило с такими селекторами:

input:focus ~ .label-box::before,
input:valid ~ .label-box::after {
  ...
}

И в этом правиле зададим нужную ширину частей рамки.

Чтобы выделение появлялось и исчезало плавно, нужно для обоих его частей задать плавный переход в этом правиле:

.label-box::before,
.label-box::after {
  ...
}