Когда я меняю тип ввода с текста на электронную почту, буквы перекрываются (форма, использующая только CSS и HTML)

Question

Когда я меняю тип ввода с текста на электронную почту в моей контактной форме - буквы перекрываются, но только когда вы вводите не электронную почту. Я застрял.

Это должны быть только HTML и CSS.Я новичок в веб-разработке, поэтому, пожалуйста, будьте осторожны:)

PrtSc из браузера

Контактная форма веб-страницы с типом ввода = "текст"

Github-репо с формой

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.

Однако, если вы хотите, чтобы label продолжал работать, вы даже вводите неверный адрес электронной почты после изменения type="text" на type="email".Попробуйте этот код.

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