CSS :focus-within | 交互式表单设计

简介

在本实验中，我们将探索 CSS 中的 :focus-within 伪类，它允许我们在父元素的任何子元素获得焦点时，为该父元素应用样式。我们将利用此功能创建一个视觉上吸引人的表单，当用户与之交互时，表单会改变其外观。通过本实验，你将更好地理解如何使用 CSS 创建交互式表单来提升用户体验。

这是一个实验（Guided Lab），提供逐步指导来帮助你学习和实践。请仔细按照说明完成每个步骤，获得实际操作经验。根据历史数据，这是一个初级级别的实验，完成率为 100%。获得了学习者 100% 的好评率。

子元素获得焦点

虚拟机中已经提供了 index.html 和 style.css。

要在表单的任何子元素获得焦点时更改表单的外观，请使用伪类 :focus-within 为父元素应用样式。例如，在给定的 HTML 代码中，如果任何输入字段获得焦点，form 元素将具有绿色背景。要为子元素应用样式，请使用适当的 CSS 选择器，如 label 和 input。

<form>
  <label for="username">用户名：</label>
  <input id="username" type="text" />
  <br />
  <label for="password">密码：</label>
  <input id="password" type="text" />
</form>

form {
  border: 2px solid #52b882;
  padding: 8px;
  border-radius: 2px;
}

form:focus-within {
  background: #7cf0bd;
}

label {
  display: inline-block;
  width: 72px;
}

input {
  margin: 4px 12px;
}

请点击右下角的“上线”以在端口 8080 上运行 Web 服务。然后，你可以刷新“Web 8080”标签页来预览网页。

总结

恭喜你！你已经完成了“子元素获得焦点”实验。你可以在 LabEx 中练习更多实验来提升你的技能。

使用 CSS :focus-within 增强表单交互性

简介

子元素获得焦点

总结