Как сделать вылет заголовка при нажатии мыши в контактной форме?

Question

[Berkutman]

Всем привет, как сделать вылет заголовка при клике мыши по форме?
Работает с коробки только при вводе текста сейчас.

Answer 1

[Кристина]

https://codepen.io/anon/pen/XPQJgK Но валидацию нужно делать на js.

<form action="" class="pageForm">
  <div class="pageForm__wrap">
    <input id="name" type="text" class="pageForm__input" autocomplete="off" required>
    <label for="name" class="pageForm__label">Фамилия и имя</label>
  </div>
</form>

.pageForm__wrap{
  position: relative;
  margin-top: 50px;
}

.pageForm__label{
  position: absolute;
  top: 15px;
  left: 15px;
  transition: .3s;
}

.pageForm__input{
  width: 300px;
  height: 40px;
}

.pageForm__input:focus ~ .pageForm__label,
.pageForm__input:not(:focus):valid ~ .pageForm__label{
  margin-top: -50px;
  color: #aaa;
  font-size: 14px;
}