Question

我知道它似乎是假的，但我不知道为什么:valid选择器无效

我有这段代码

HTML

<input type="email" class="form-control" id="inputEmail" placeholder="Email" value="j@gmail.com">

CSS

input:valid{
    border:1px solid green;
    background:red;
}

＆＃13;

input:valid {
  border: 1px solid green;
  background: red;
}

＆＃13;

<input type="email" class="form-control" id="inputEmail" placeholder="Email" value="j@gmail.com">

＆＃13;

还有一个奇怪的事情，它正在编写代码片段而不是JSFIDDLE，如果value=""无效输入，我该如何处理？

谢谢，

Answer 1

您可以使用以下语句来声明电子邮件字段。

<input type="email" placeholder="Enter your email " required>

上述声明将首先验证您的电子邮件。如果验证成功，则表单将另行提交。所以您不需要为此付出额外的努力。

Answer 2

在您的required中包含HTML input element关键字，如果不包括该关键字将始终有效。

<input type="email" class="form-control" id="inputEmail" placeholder="Email" value="j@gmail.com" required>

谢谢。

Answer 3

请更新您的css，因为您使用的是红色背景色..试试这个css

input:valid{
    background:green;
}

Answer 4

您可以使用'required'使空值无效输入。

编辑代码以包含无效选择器。

<input type="email" class="form-control" id="inputEmail" placeholder="Email" value="j@gmail.com" required>

CSS

input:invalid{
      border:1px solid green;
      background:red;
 }