[FIXED] When I change input type from text to email, letters overlap (form using only css and html)

Issue

When I change input type from text to email in my contact form - letters overlap, but only when your input is not email.I'm stuck.

It has to be html and css only. I'm new to web dev so please be gentle :)

PrtSc from browser

Webpage contact form with input type="text"

Github repo with form

Solution

The reason for your issue is this bunch of styles.

.box input:focus ~ label,
.box textarea:focus ~ label,
.box input:valid ~ label,
.box textarea:valid ~ label
{
    top: -12px;
    left: 0;
    color: #911b64;
    font-size: 12px;
    font-weight: bold;
}

This says to move the label upward when you try to type into the input field and it says there only if the value is valid. When you change the type="text" to type="email", it expects the input to be a valid email address.

So the issue you talked about is only appearing when you input invalid email address. Try a valid email address, something in this format abc@aba.ab.

However, if you want the label to stay up even you insert invalid email address after you changed the type="text" to type="email". Try this code.

.box input:focus ~ label,
.box textarea:focus ~ label,
.box textarea:valid ~ label
{
    top: -12px;
    left: 0;
    color: #911b64;
    font-size: 12px;
    font-weight: bold;
}

Answered By - Aryan Twanju

Answer Checked By - Marie Seifert (PHPFixing Admin)