Question

HTML：

<form method="post" action="#" autocomplete="off" id="validform">
                <div class="form-group col-sm-6">


                    <input type="text" class="form-control" id="name" required>
                    <span class="underline"></span>
                    <label for="name">Your name</label>

                </div>
                <div class="form-group col-sm-6">


                    <input type="email" class="form-control" id="email" required>
                    <span class="underline"></span>
                    <label for="email">Email</label>

CSS：

input:focus ~ label,
input:valid ~ label,
textarea:focus ~ label,
textarea:valid ~ label
{
    font-size: .8em;

    top: -20px;

    color: #24cf88;
}

因此，只要您关注输入标签或标签有效，则标签基本上会移至输入标签的顶部。它适用于文本输入，但是对于电子邮件输入，除非您输入正确的电子邮件格式，否则它会移回到底部。在电子邮件输入中输入内容后，如何使文本移到顶部？如果您想查看网站的运作方式，我会提供该网站的链接。

https://baziiner21.github.io

Answer 1

尝试从输入中删除type=email，并使用javascript添加您自己的验证

Answer 2

这是因为您正在使用：valid选择器。您可以始终使用以下内容：

input:invalid ~ label {
    font-size: .8em;
    top: -20px;
    color: #cf2424;
}

/* Extra for colouring the line based on invalid input */
input:invalid + span::after, input:invalid + span::before {
    background: #cf2424;
}

上面的代码将与您现有的代码并列

Answer 3

pattern="."

只需将其添加到您的电子邮件字段中，它将更改输入的任何字符都认为有效的字符，然后您的有效/无效CSS样式就会起作用。

编辑：这将要求您在表单上使用novalidate，以防止浏览器抱怨无效的电子邮件格式。

在输入标签中输入内容后，是否会触发任何CSS选择器？

3 个答案: