HTML 表单输入初始、焦点和填写状态答案

【问题标题】：HTML Form Input initial, focus and filled out statesHTML 表单输入初始、焦点和填写状态
【发布时间】：2015-08-23 02:45:13
【问题描述】：

我正在使用具有 3 个状态的引导程序设计一个表单。

我目前无法区分状态 #1 和 #3。没有javascript可以做到吗？

【问题讨论】：

我认为您无法使用 pure css 区分 1 和 3。
我也想看看这个问题是否有答案。我知道::hover、::active、::focus、::link。 ::empty 可能适用于文本框等输入字段，但并非所有输入字段。如果你使用某种形式的不显眼的验证来为你添加类，你能不使用它们吗？
HTML5 / CSS3 that might be of use 中似乎有一些功能如果您正在寻找严格的浏览器兼容性和一致性，我会说答案是“不 - 你需要 javascript。”

【解决方案1】：

目前没有 CSS 可以区分“空”和“非空”（除非您在每次击键时都使用 Javascript 将内容复制到 value 属性）。

但是，您可以使用 :valid 伪类。如果您不介意要求用户在文本框中输入内容，可以添加required 属性，然后非空值将有效！

input {background:white} /* empty state */

input:valid {background:yellow} /* has content typed in */

&lt;input required&gt;

【讨论】：

pattern=".*" 是否实际上暗示允许零个或多个字符？这应该是pattern=".+"，还有一个字符吗？当然， required 属性确保输入了至少一个字符，但我仍然认为相应地更新正则表达式会更好？
@user2019515 嗯，你是对的。在这个特定的示例中，您甚至可以完全省略模式属性，它会以相同的方式工作。所以我不知道我为什么这样做！
我可能认为pattern=".*" 意味着空值也被认为是可以的，因为 OP 没有说该值必须是必需的。但我真的不记得了。无论如何，事实并非如此，所以，没关系。