使用:required、:optional、:valid和:invalid在CSS中为表单输入设置样式

介绍

在验证前端输入字段的内容时，现在的事情比以前容易多了。 我们可以使用 :required, :optional, :valid 和 :invalid 伪类加上 HTML5 表单验证属性，如 [ X159X] 需要 或 模式 以创建非常具有视觉吸引力的结果。 这些伪类适用于 input、textarea 和 select 元素。

输入伪类

这是工作中的伪类的示例。 让我们从这个 HTML 标记开始：

<form action="#">
  <input type="text" placeholder="First Name" required>
  <input type="email" placeholder="Email" required>
  <input type="text" placeholder="Nickname">
  <input type="text" placeholder="Favorite pizza topping">
</form>

让我们应用以下样式：

input {
  border: 2px solid;
  border-radius: 4px;
  font-size: 1rem;
  margin: 0.25rem;
  min-width: 125px;
  padding: 0.5rem;
  transition: background-color 0.5s ease-out;
}
input:optional {
  border-color: gray;
}
input:required {
  border-color: black;
}
input:invalid {
  border-color: red;
}

结果如下：

请参阅 alligatorio (@alligatorio) 在 CodePen 上的 Pen vYGeLYw。

---

在上面的演示中，<input type="email" 是一种 HTML5 输入类型，它告诉浏览器需要一个电子邮件地址。 因为我们还使用了 required 属性，所以现代浏览器只会在输入 有效的电子邮件 时将输入设置为 :valid。

添加 :focus 伪类

让我们通过根据焦点状态设置样式并根据有效性状态添加背景图像和颜色来使事情变得更加有趣，并且仅当输入处于焦点时。 我们将使用相同的 HTML 标记。

这是我们更新的 CSS：

input {
  border: 2px solid;
  border-radius: 4px;
  font-size: 1rem;
  margin: 0.25rem;
  min-width: 125px;
  padding: 0.5rem;
  transition: border-color 0.5s ease-out;
}
input:optional {
  border-color: gray;
}
input:required:valid {
  border-color: green;
}
input:invalid {
  border-color: red;
}
input:required:focus:valid {
  background: url("https://assets.digitalocean.com/labs/icons/hand-thumbs-up.svg") no-repeat 95% 50% lightgreen;
  background-size: 25px;
}
input:focus:invalid {
  background: url("https://assets.digitalocean.com/labs/icons/exclamation-triangle-fill.svg") no-repeat 95% 50% lightsalmon;
  background-size: 25px;
}

上面的 CSS 有两个关键的变化：

1. input:required:valid 仅将成功状态应用于 required 输入。 因为从技术上讲，optional 输入始终有效。
2. input:focus:valid' and 'input:focus:invalid 仅在输入被聚焦时适用。

结果如下：

参见 CodePen 上 alligatorio (@alligatorio) 的 Pen gOrGPxP。

---

您可能想在输入上使用 ::before 或 ::after 来添加内容，但不幸的是，这在输入元素上是不可能的。 一个技巧是拥有一个兄弟 span 元素，根据输入的有效性添加内容。 像这样的东西：

input:focus:invalid + span::before { ... }。