为什么 CSS :focus-within 如此神奇

这不是一个 :focus 选择器（当你聚焦于某个元素时，它会高亮显示）。
而是一个当元素内部某个元素获得焦点时触发的选择器。

在我们的例子中，我们将专注于表格（我知道你在那里做了什么😏）

最终结果将如下所示：

HTML结构

至于我们的 HTML，我们将创建一个具有 2 个输入的表单。

<form>
  <label for="username">Username</label>
  <input type="text" name="username" />
  <br /><br />
   <label for="password">Password</label>
  <input type="password" name="username" />
</form>

这就是我们这个特定演示所需要的全部内容。

CSS focus-in 伪选择器

:focus-within 是一个伪选择器，就像 :before 或 :after 一样。

让我们首先添加一些基本样式。

body {
  display: flex;
  min-height: 100vh;
  justify-content: center;
  align-items: center;
}
form {
  border: 1px dashed #333;
  padding: 25px;
}

这将确保我们的表单绝对位于页面中央，并有一个小边框，以便稍后展示我们的效果。

现在我们想吸引用户的注意力到表单上，但是当他们聚焦输入字段时，使它变成一种奇特的颜色。

form {
  border: 1px dashed #333;
  padding: 25px;
  transition: background 0.3s ease;
}
form:focus-within {
    background: #f4d35e;
}

这会将表单的背景更改为黄色。

您可以在 Codepen 中看到这一点。

让它变得更棒

是的，我们甚至可以通过使用 box-shadow hack 让它变得更棒，我们可以创建一种模态效果！

form {
  border: 1px dashed #333;
  padding: 25px;
  transition: all 0.3s ease;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0);
}
form:focus-within {
  background: #f4d35e;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.7);
}

我们创建一个 box-shadow，其大小为视口最大位置（宽度或高度）的 100%。初始情况下，它的不透明度为 0。

当我们有 :focus-within 时，我们将不透明度更改为 70%。

效果是类似灯箱的效果✨。

浏览器支持

:focus-within 选择器实际上有相当好的支持，考虑到 IE 已经死了。

感谢您的阅读，让我们联系起来！

感谢您阅读我的博客。欢迎订阅我的电子邮件简报，并在Facebook或Twitter上与我联系。

文章来源：https://dev.to/dailydevtips1/why-css-focus-within-is-amazing-27p8