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

【问题标题】：e-mail span drops down after entering invalid e-mail address in the 'contact' form在“联系人”表单中输入无效的电子邮件地址后，电子邮件跨度下降
【发布时间】：2021-05-16 00:53:25
【问题描述】：

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

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

【问题讨论】：

这能回答你的问题吗？ jquery floating label email

标签： javascript html css email

【解决方案1】：

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

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

【讨论】：