Проблема с формой?

Question

[Ivan Ivanovich]

Здравствуйте. Сделал форму - https://jsfiddle.net/t62pjzkw/1/ .

Проблема следующая: при вводе почты надпись email поднимается, всё правильно, но если нажать на другую строчку, то текст email опускается, а так быть не должно.

Помогите пожалуйста.

Comments

[Алексей Ярков]

Ну ты бы еще обфусцировал код ))
Отформатируй хоть, чтобы ориентироваться можно было

[Ivan Ivanovich]

Алексей Ярков, Пардон. https://jsfiddle.net/t62pjzkw/1/

[Талян]

лейбл у инпута type=email ведет себя как надо, если мыло ввести правильное.

Answer 1

[Henxed]

Сделал вам с jQuery, по крайне мере работает лучше чем на чистом css


В css поменял вот эту часть:

.input-field input:focus + label, .input-field input.filled  + label, .input-field textarea:focus + label, .input-field textarea.filled  + label{
  top: -25px;
  font-size: 14px;
  padding: 2px 5px;
  background: #ff006a;
  color: #fff;
  border-radius: 4px;
}

Comments

[Ivan Ivanovich]

Спасибо Вам большое!

Answer 2

[Талян]

лейбл у инпута type=email ведет себя как надо, если мыло ввести правильное.
Измените тип инпута на text, и всё.

Либо придётся JS-ом, ибо с помощью CSS вы правильность email никак не проверите, кроме как так, как сделано у вас сейчас.