CSS:改变孩子焦点的父母

Question

假设你有类似的东西:

<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之后,所有内容都是$ digest'd,因此文本输入再次失去焦点.由于文本输入实际上从未实际获得焦点,因此使用ng-blur恢复显示标签是错误的:用户必须单击文本输入,然后再次单击它以恢复显示标签.

编辑:

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

Answer 1

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

新的CSS伪类:focus-within将有助于这样的情况,当人们使用tabbing进行导航时,它将有助于访问,在使用屏幕阅读器时很常见.

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

:focus-within伪类匹配自身匹配的元素:焦点或具有匹配的后代: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 type="email" 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>

Answer 2

没有机会用CSS做到这一点.CSS只能设置兄弟姐妹,孩子等不是父母的风格.

您可以像这样简单地使用JS:

<style>
.parent {background: green}
.focused {background: red;}
</style>
<div class="parent">
    <input class="childInput" type="text" />
    <div class="sibling"></div>
</div>

<script>
$('.parent > *')
    .focus(function() {
        $('.parent').addClass('focused');
    })
    .blur(function() {
        $('.parent').removeClass('focused');
    });
</script>

http://jsfiddle.net/C4bZ6/

此代码接受所有直接子项.parent,如果您关注其中一个,则将类focused添加到父级.在模糊时,此类将被删除.