Question

我有以下问题。我正在尝试在我的项目http://designscrazed.org/css-html-login-form-templates/上运行此示例。

这是我的HTML：

<p id="firstname_line">
    <label>First Name:</label>
    <input type="text"  name="firstname" id="firstname" required pattern="^[a-zA-Z]+$"><span title="Name should contain only letters!"></span>
</p>

我的CSS：

#firstname_line input:invalid ~ span:after {
    opacity: 1;
    color:green;
}
#firstname_line input ~ span:after {
    content:attr(title);
    color:red;
    margin-left:.6rem;
    opacity: 0;
    transition: 1s 1s opacity linear;
}
#firstname_line span {
    color: red;
    display: block;
}

当我尝试在我的项目中应用示例时，我在所有浏览器上都有一个奇怪的问题。在加载时，如果输入字段为空，则应将其视为＆＃34;：valid＆＃34;字段，或非＆＃34;：无效＆＃34;和CSS类 #firstname_line输入：无效~scope：after 不应该应用。而不是那样，两个类 #firstname_line输入：无效〜span：span：after 和 #firstname_line input~span：在{之后加载并且可见。正如您在示例中所看到的那样，加载时不应该看到它。

有人可以提出问题所在吗？

Answer 1

让我们先简化一下：

div input ~ span:after {
  content: attr(title);
  display: none;
}

div input:invalid ~ span:after {
  display: inline;
  color: red;
}

<div>
  <input type="text" required pattern="^[a-zA-Z]+$">
  <span title="Name should contain only letters!"></span>
</div>

跨度获取:invalid伪选择器样式的原因是因为输入上的required属性使最初的空白字段无效。

删除required属性，:invalid伪选择器不会被选中并带有空白字段值。

div input ~ span:after {
  content: attr(title);
  display: none;
}

div input:invalid ~ span:after {
  display: inline;
  color: red;
}

<div>
  <input type="text" pattern="^[a-zA-Z]+$">
  <span title="Name should contain only letters!"></span>
</div>

此解决方案的问题是不再需要字段来提交表单。如果字段值留空，则不会执行正则表达式测试，表单将提交。

使用纯CSS无法确定字段值是否为空白或超出页面的初始加载（DOM不会更新为用户类型）。这就是为什么使用Javascript是一种更安全/更清洁/更可靠的验证表单客户端的方法。

HTML5 + CSS3 + Firefox问题

1 个答案: