当我将输入类型从文本更改为电子邮件时，字母重叠（仅使用 css 和 html 的形式）

Question

当我在我的联系表单中将输入类型从文本更改为电子邮件时 - 字母重叠，但只有当您的输入不是 email.I 时才会卡住。

只能是 html 和 css。我是网络开发新手，所以请保持温柔:)

PrtSc from browser

Webpage contact form with input type="text"

Answer 1

你的问题是因为这一堆样式。

.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;
}

这表示当您尝试在输入字段中键入时将 label 向上移动，并且仅当值为 valid 时才显示在那里。当您将 type="text" 更改为 type="email" 时，它希望输入是有效的电子邮件地址。

所以您所说的问题只有在您输入无效的电子邮件地址时才会出现。尝试一个有效的电子邮件地址，格式为 abc@aba.ab.

但是，如果在将 type="text" 更改为 type="email" 后，即使您插入了无效的电子邮件地址，您仍希望 label 保持不变。试试这个代码。

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

当我将输入类型从文本更改为电子邮件时，字母重叠（仅使用 css 和 html 的形式）

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

html

css

forms

web-deployment