假设您有如下内容:

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

我希望当子对象获得焦点时更改父项/sibling 项的外观.做这样的事情有什么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之后,才会发现所有内容都是$digest的,因此文本输入再次失去焦点.由于文本输入实际上从未接收到焦点,因此使用ng-blur恢复显示标签是有缺陷的:用户必须单击文本输入,然后再次单击退出才能恢复显示标签.

编辑:

这里有一个关于这个问题的例子:http://plnkr.co/edit/synSIP?p=preview

推荐答案

您现在可以在纯css中完成这项工作,因此不需要任何javascript?.

对于这样的情况,新的CSS伪类:focus-within会有所帮助,当人们使用Tab键进行导航时(在使用屏幕阅读器时很常见),它将有助于实现可访问性.

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

伪类内的:Focus-匹配元素,这些元素本身 Match:Focus或具有匹配的子代:Focus.


Can I use...

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


Demo

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>

Html相关问答推荐

我可以使用 Markdown 在 hugo 帖子内容中创建带有 'target="_blank"' 的链接吗?

如何从 div 内的另一个页面显示不完整的 HTML

Flexbox 在添加额外的 div 后停止正常工作

有没有办法将元素固定在具有 object-fit:cover 属性的图像的某个点?

EM 中的高度不等于按钮和文本区域的相同值

当文本比 React 中的输入本身长时,如何以编程方式显示 HTML 输入元素的最左侧内容

CSS(尾风)网格高度 100vh 不起作用

如何向输入添加浮动标签?

更改复选框的 colored颜色

类似 StackOverflow 的响应式导航栏

我们如何使用 css 水平对齐文本?

abel(input type="radio") 不在中心

悬停状态之间的元素高度转换

从传单 map 导入数据作为 R 中的 sf 对象

Bootstrap - 将按钮与卡片底部对齐

如何在 iOS11 主屏幕 Web 应用上访问相机?

Flexbox:每行 4 个项目

无法在 HTML 中接近 Typescript 枚举

强制 css 网格容器填充设备的全屏

Angular 2:由于表单未连接而取消表单提交