Изменение положения метки, когда ввод фокусируется с использованием стилизованных компонентов

Question

Я недавно использую стилевые компоненты и пытаюсь создать вход, используя стандарты дизайна материалов Google, но мне не удалось воссоздать анимацию, которая заставляет метку двигаться, когда ввод сфокусирован.

const Input = styled.input`
  font-size: 18px;
  padding: 10px 10px 10px 5px;
  display: block;
  width: 300px;
  border: none;
  border-bottom: 1px solid #757575;
  &:focus {
    outline: none;
  }
`;
const Label = styled.label`
  color: #999;
  font-size: 18px;
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  left: 5px;
  top: 10px;
  transition: 0.2s ease all;
  ${Input}:focus & {
    top:-20px;
  font-size:14px;
  color:#5264AE;
  }
`;

Итак, в резюме я хочу, чтобы метка переместилась на 20 пикселей вверх, изменила размер шрифта и цвет, когда метка сфокусирована, я не совсем уверена, правильный ли мой подход, или лучше простореализовать нормальный класс CSS в этом случае.

Answer 1

Вам не хватает знака ~ для нацеливания элемента метки на фокус ввода

const Label = styled.label`
  color: #999;
  font-size: 18px;
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  left: 5px;
  top: 10px;
  transition: 0.2s ease all;
  ${Input}:focus ~ & {
    top:-18px;
    font-size:14px;
    color:#5264AE;
  }
`;

Рабочая демонстрация