小编典典

CSS：改变父母对孩子的关注

angularjs

假设您有类似的内容：

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

当孩子获得焦点时，我想更改父母/兄弟姐妹的外观。做这样的事情有CSS技巧吗？

编辑：

我的问题的原因如下：

我正在创建一个需要可编辑文本字段的Angular应用。在单击之前，它应该看起来像一个标签，这时它应该看起来像是普通的文本输入。我基于：focus设置了文本字段的样式，以实现此效果，但是文本被文本输入的边界所截断。我还使用ng-
show，ng-hide，ng-blur，ng-keypress和ng-
click在标签和基于模糊，按键和点击的文本输入之间进行切换。除一件事外，此方法运行良好：标签的ng-click =“ setEdit（this，$
event）”将ng-show和ng-hide使用的编辑布尔值更改为true后，它使用jQuery调用.select（）文字输入。但是，直到ng-
click完成后，所有内容才被$ digestd，因此文本输入再次失去焦点。由于文字输入从未真正获得焦点，

编辑：

这是该问题的一个小例子：http
://plnkr.co/edit/synSIP? p=
preview

阅读 223

2020-07-04

共1个答案

小编典典

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

新的CSS伪类:focus-within将对此类情况有所帮助，并在人们使用制表键进行导航时提供可访问性，而在使用屏幕阅读器时会很常见。

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

：focus-within伪类匹配元素本身匹配：focus或后代匹配：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>

2020-07-04