表单验证样式在输入框获得焦点时

/* Only show invalid ring while not focused */
input:not(:focus):not(:placeholder-shown):invalid {
  border-color: var(--color-invalid);
}
input:not(:focus):not(:placeholder-shown):invalid ~ .error-message {
  display: block;	
}

/* Only show valid ring while not focused and if a value is entered */
/* :empty won't work here as that targets elements that have no childeren. Therefore we abuse :placeholder-shown */
input:not(:focus):not(:placeholder-shown):valid {
  border-color: var(--color-valid);
}

直接从每周平台新闻中提取，其中Šime Vidas 涵盖了 两个长期存在的问题，即使用 :invalid 来设置表单输入验证的样式。显然，发生的事情是……

• [输入] 在用户仍在键入值时变为 :invalid。
• 如果表单字段是必需的（），它将在页面加载时立即变为 :invalid。

这两种行为都可能令人困惑（且 恼人），因此网站不能仅仅依赖 :invalid 选择器来指示用户输入的值无效。但是，可以选择 组合 :invalid 和 :not(:focus) 甚至 :not(:placeholder-shown) 来确保页面上的“无效”样式不会应用于 ＜input＞，直到用户完成输入值并将焦点移到另一个元素为止。

Ryan Florence 在一条推文中很好地总结了这一点

我更喜欢表单在失去焦点之前才开始报错 🤨 pic.twitter.com/aLKVovpCao

— Ryan Florence (@ryanflorence) 2021年1月27日

因此，这段代码的作用是通过将 :invalid 与 :not(:focus) 和 :not(:placeholder-shown) 组合来增强 :invalid。

这意味着什么？让我们将代码翻译成更易读的内容。

input:not(:focus):not(:placeholder-shown):invalid {}

如果输入框未获得焦点、占位符文本未显示且输入的文本无效……那么您可以使用这些样式。

换句话说，这可以防止在输入文本并将焦点移到另一个元素之前应用无效样式。

input:not(:focus):not(:placeholder-shown):invalid ~ .error-message

嘿，如果满足相同的条件，让我们显示错误消息。

这与上面的代码完全相同，但选择了一个 .error-message 类，并将其从 display: none 设置为 display: block，仅在输入文本并将焦点从输入框移到其他元素之后。

input:not(:focus):not(:placeholder-shown):valid

哦，输入的文本有效？好的，让我们改用这些样式。

同样，相同的条件，但链接到 :valid 而不是 :invalid。这样，我们就可以为用户提供不同的样式集来指示他们输入的内容是好的！

根据 Šime 的说法，这种代码片段在将来可能不再需要，因为 :user-invalid 和 :user-valid 正在得到更大的推广。Firefox 已经 打算 发布其未带前缀的解决方案。在 Safari 和 Chrome 中也开通了相应的工单。