The problem with the form?

Hello. Made form - https://jsfiddle.net/t62pjzkw/1/ .

The problem is this: when you enter email the email inscription rises, all right, but if you click on another row, the text of the email is omitted, but it should not be.

Please help.
March 19th 20 at 08:31
2 answers
March 19th 20 at 08:33
Solution
Did you with jQuery, at least works better than pure css


In css changed so this part:
.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;
}
Thank You very much! - lea.Ada commented on March 19th 20 at 08:36
March 19th 20 at 08:35
label the input type=email is behaving as it should if you enter the correct soap.
Change the input type to text, and all.

Or have a JS-Ohm, because with CSS you correct the email did not check but as you have done now.

Find more questions by tags Web DevelopmentHTMLCSS