html - 我如何使用 :valid and :invalid selectors for css?

Question

我是编码新手，我从 friend 那里听说可以在我的表单中使用我的 css 中的 :valid 和 :invalid 选择器。但我该怎么做呢？

Answer 1

其实是个有趣的问题。我相信这是 CSS3 的全新事物之一。不确定您是否已经可以应用它。我不认为你现在可以，因为我只是在 fiddle 上试了一下，但它对我不起作用。所以它可能会在 CSS 选择器的另一次更新中引入。

你的使用方式是这样的:

html:

Email: <input type="email" required>

CSS:

input[type=email]:invalid {
  outline: red solid 3px;
}
 
input[type=email]:valid {
  outline: lightgreen solid 3px;
}

使用上述 CSS，即使在用户输入任何内容之前，电子邮件字段的样式也会带有红色轮廓。用户输入有效的电子邮件地址后，轮廓将变为绿色。

希望对您有所帮助!