CSS 使用 required 属性为 HTML5 输入字段设置提示样式

在本文中，我们将介绍如何使用 CSS 来为 HTML5 输入字段设置提示样式，并且使用 required 属性来验证输入是否为空。

阅读更多：CSS 教程

CSS 选择器

在开始之前，先了解一下 CSS 选择器。在 CSS 中，选择器指定了要应用样式的 HTML 元素。常见的选择器包括标签选择器、类选择器和 ID 选择器。

标签选择器：通过 HTML 元素的标签名称进行选择，例如 input 选择所有的 input 元素。

类选择器：通过定义的类名进行选择，例如 .input-field 选择所有 class 属性为 input-field 的元素。

ID 选择器：通过定义的 ID 进行选择，例如 #email 选择 id 属性为 email 的元素。

使用 required 属性

在 HTML5 中，可以使用 required 属性来验证表单输入字段是否为空。当用户不填写必填字段时，浏览器会显示默认的提示信息。但是我们可以使用 CSS 来自定义和美化这些提示信息。

下面是一个示例 HTML 表单：

<form>
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name" required>

  <label for="email">邮箱：</label>
  <input type="email" id="email" name="email" required>

  <input type="submit" value="提交">
</form>

在这个示例中，我们设置了两个输入字段，姓名 和 邮箱，并且为它们加上了 required 属性。

美化提示信息

默认情况下，浏览器会以一种简单的样式显示提示信息，但我们可以用 CSS 来定制这些样式。

隐藏默认提示信息

我们可以使用伪类选择器 :invalid 来选择必填字段为空的情况，并将其默认样式设置为不可见：

input:invalid {
  visibility: hidden;
}

自定义提示信息样式

我们可以使用伪类选择器 :invalid 和伪元素选择器 ::after 来自定义提示信息样式：

input:invalid {
  border: 2px solid red;
}

input:invalid::after {
  content: "这个字段必填！";
  color: red;
  display: block;
}

在这个示例中，当必填字段为空时，输入框的边框会变为红色，并且显示一条红色的提示信息。

添加动画效果

如果我们希望在用户输入时，提示信息渐渐出现或者淡出，我们可以使用 CSS 过渡和动画效果。

下面是一个示例，当用户输入时，提示信息以淡入淡出的效果出现和消失：

input:invalid {
  border: 2px solid red;
  opacity: 0;
  transition: opacity 0.5s;
}

input:invalid:focus {
  outline: none;
}

input:invalid::after {
  content: "这个字段必填！";
  color: red;
  display: block;
  opacity: 0;
  transition: opacity 0.5s;
}

input:invalid:focus::after {
  opacity: 1;
}