CSS 在输入字段上使用CSS切换标签样式（活动/聚焦）

在本文中，我们将介绍如何使用CSS在输入字段上切换标签样式，而无需使用JavaScript。通过使用:active和:focus伪类选择器，我们可以根据用户在字段上执行的操作来改变标签的样式。

阅读更多：CSS 教程

1. :active 伪类选择器

:active 伪类选择器用于匹配用户激活（按下）某个元素时的状态。在输入字段上使用 :active 伪类选择器，可以在按下输入字段时改变标签的样式。下面是一个示例：

.input-label:active {
  color: red;
}

在上面的示例中，当用户按下输入字段时，.input-label 类的样式将变为红色。

2. :focus 伪类选择器

:focus 伪类选择器用于匹配当前获得焦点（被选中）的元素。在输入字段上使用 :focus 伪类选择器，可以在用户点击或使用 Tab 键选中输入字段时改变标签的样式。下面是一个示例：

.input-label:focus {
  background-color: yellow;
  font-weight: bold;
}

在上面的示例中，当用户点击或使用 Tab 键选中输入字段时，.input-label 类的背景颜色将变为黄色，并加粗。

3. 切换样式的组合使用

为了实现更复杂的样式切换效果，可以使用 :active 和 :focus 伪类选择器的组合。下面是一个示例：

.input-label:active,
.input-label:focus {
  color: blue;
  font-size: 16px;
}

在上面的示例中，当用户按下输入字段或选中输入字段时，.input-label 类的文字颜色将变为蓝色，并且字体大小将变为16像素。

4. 示例

下面是一个完整的示例，展示了如何使用CSS切换输入字段标签的样式：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .input-label {
      display: block;
      margin-bottom: 10px;
    }

    .input-field {
      padding: 5px;
    }

    .input-label:active,
    .input-label:focus {
      color: blue;
      font-size: 16px;
    }
  </style>
  <title>Toggle Styles on Label for Input Field</title>
</head>
<body>
  <label for="name" class="input-label">Name:</label>
  <input type="text" id="name" class="input-field" placeholder="Enter your name">

  <label for="email" class="input-label">Email:</label>
  <input type="email" id="email" class="input-field" placeholder="Enter your email">
</body>
</html>

在上面的示例中，当用户按下或选中输入字段时，标签的样式将发生改变。你可以自己尝试运行这段代码，并观察效果。