在"'contact'"窗体中输入无效电子邮件地址后，电子邮件范围下拉

Question

如何让" E-mail "的span保持在顶部的粉红色

.contactt{
position: relative;
padding: 50px 100px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.container{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.contactFormm{
width: 40%;
padding: 40px;
background: #fff;
}

.contactFormm .inputBox {
position: relative;
width: 100%;
margin-top: 10px;
}
.contactFormm .inputBox input,
.contactFormm .inputBox textarea{
width: 100%;
padding: 5px 0;
font-size: 16px;
margin: 10px 0px;
border: none;
border-bottom: 2px solid #333;
outline: none;
resize: none;
}
.contactFormm .inputBox span{
left: 0;
position: absolute;
padding: 5px 0;
font-size: 16px;
margin: 10px 0px;
pointer-events: none;
transition: 0.5s;
color: #666;
}
.contactFormm .inputBox input:focus ~ span,
.contactFormm .inputBox input:valid ~ span,
.contactFormm .inputBox textarea:focus ~ span,
.contactFormm .inputBox textarea:valid ~ span{
color: #e91e63;
font-size: 12px;
transform: translateY(-20px);
}

<main class='contactt container'>
<div class='contactFormm'>
<form>
<h1>Contact form</h1>
<div class='inputBox'>
<input type="email" name='' required='required'>
<span>E-mail</span>
</div>
<div class='inputBox'>
<input type="text" name='' required='required'>
<span>Name</span>
</div>
<div class='inputBox'>
<input type="text" name='' required='required'>
<span>Subject</span>
</div>
<div class='inputBox'>
<textarea required='required'></textarea>
<span>Type your Message...</span>
</div>
<div class='inputBox'>
<input type='submit' name='' value='Send'>
</div>
</form>

</div>

</main>

?我还能用别的词来代替valid吗?我知道"电子邮件";span下拉，因为它不是有效的电子邮件，但即使有人写无效的电子邮件，我希望它仍然是粉红色的顶部，但在同一时间，当我按下"发送"按钮，我希望chrome说它是无效的。请看看我的代码，也许你可以

当我写'dhdhd' <-无效电子邮件并转到下一个框时，粉红色的' e-mail '范围下降并变为灰色。它只会工作，如果我写有效的电子邮件，例如'[e-mail]'，但我仍然希望这个'e-mail'跨度保持在顶部，即使它是无效的

Answer 1

你可以使用:invalid伪类，这将工作，虽然我认为它会显示为粉红色的所有时间。我不认为你可以实现你想要的结果不使用JavaScript，除非你的目标input[value=""](即空输入)。

只是一个快速的注意，你应该使用适当的<label>元素，并将其关联到字段的可访问性。