Berkutman
@Berkutman

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

Всем привет, как сделать вылет заголовка при клике мыши по форме?
Работает с коробки только при вводе текста сейчас.
5ba6005417044271396946.png5ba6007147bb7012705746.png
  • Вопрос задан
  • 47 просмотров
Пригласить эксперта
Ответы на вопрос 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;
}
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы