javascript - CSS:改变 parent 对 child 的关注

Question

假设您有类似的东西:

<div class="parent">
    <input class="childInput" type="text" />
    <div class="sibling"></div>
</div>

我想在 child 获得焦点时更改 parent / sibling 的外观。做这样的事情有什么 CSS 技巧吗？

编辑:

我的问题原因如下:

我正在创建一个需要可编辑文本字段的 Angular 应用程序。它应该看起来像一个标签，直到它被点击，此时它应该看起来像一个普通的文本输入。我根据 :focus 对文本字段设置了样式以实现此效果，但文本被文本输入的边界 chop 了。我还使用 ng-show、ng-hide、ng-blur、ng-keypress 和 ng-click 根据模糊、按键和点击在标签和文本输入之间切换。这工作正常，除了一件事:在标签的 ng-click="setEdit(this, $event)"将 ng-show 和 ng-hide 使用的编辑 bool 值更改为 true 之后，它使用 jQuery 调用 .select()文本输入。但是，直到 ng-click 完成后，所有内容才 $digest'd，因此文本输入再次失去焦点。由于文本输入实际上从未获得焦点，因此使用 ng-blur 恢复显示标签是错误的:用户必须单击文本输入，然后再次单击退出以恢复显示标签。

编辑:

这是问题的示例:http://plnkr.co/edit/synSIP?p=preview

Answer 1

您现在可以在纯 CSS 中执行此操作，因此不需要 JavaScript 😁

新的 CSS 伪类 :focus-within 将有助于解决此类情况，并且在人们使用 Tab 键进行导航时有助于提高可访问性，这在使用屏幕阅读器时很常见。

.parent:focus-within {
  border: 1px solid #000;
}

The :focus-within pseudo-class matches elements that either themselvesmatch :focus or that have descendants which match :focus.

---

我可以使用...

您可以访问 http://caniuse.com/#search=focus-within 查看哪些浏览器支持此功能

---

演示

fieldset {
  padding: 0 24px 24px !important;
}

fieldset legend {
  opacity: 0;
  padding: 0 8px;
  width: auto;
}

fieldset:focus-within {
  border: 1px solid #000;
}

fieldset:focus-within legend {
  opacity: 1;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <form>
    <fieldset>
      <legend>Parent Element</legend>
      <div class="form-group">
        <label for="name">Name:</label>
        <input class="form-control" id="name" placeholder="Enter name">
      </div>
      <div class="form-group">
        <label for="email">Email:</label>
        <input type="email" class="form-control" id="email" placeholder="Enter email">
      </div>
    </fieldset>
  </form>
</div>