在“联系人”表单中输入无效的电子邮件地址后，电子邮件跨度下降

Question

我怎样才能让“电子邮件”跨度保持在粉红色的顶部

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

? 还有什么我可以用来代替“有效”的吗？ 我知道“电子邮件”跨度下降，因为它不是有效的电子邮件，但即使有人写了无效的电子邮件，我希望它在顶部仍然是粉红色的，但同时，当我按“发送”时按钮我想让 chrome 说它无效。请查看我的代码，也许你可以

当我在下一个框中写 'dhdhd' <- invalid e-mail 和 go 时，粉红色的 'E-mail' 跨度下降并变成灰色。 它只有在我写有效的电子邮件时才有效，例如“dfghj@gmail.com”，但我仍然希望这个“电子邮件”跨度保持在顶部，即使它是无效的

Answer 1

你可以使用:invalid伪类，它会起作用，尽管我认为它会一直显示为粉红色。 我认为如果不使用 JavaScript 除非您以input[value=""]目标（即空输入），否则您无法实现您想要的结果。

请注意，您应该使用适当的<label>元素并将其与字段相关联以实现可访问性。