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

您甚至可以像这样为 focus-within 和 not(focus-within) 设置样式（不使用 JavaScript => 更易于访问和更快）：

        .myform:not(:focus-within) button[type="submit"] {
            display: none;
        }

        .myform:focus-within button[type="submit"] {
            display: block;
        }

Answer 2

您现在可以在纯 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>

Answer 3

试试 contenteditible 属性。然而，这可能需要更多的工作才能将其转化为可用的表单数据。

http://jsfiddle.net/michaelburtonray/C4bZ6/20/

<span class="parent" contenteditable>Click me</span>

Answer 4

您可以使用纯 CSS 使文本输入看起来不是文本输入，除非它处于焦点位置

http://jsfiddle.net/michaelburtonray/C4bZ6/13/

input[type="text"] {
    border-color: transparent;
    transition-duration: 600ms;
    cursor: pointer;
    outline-style: none;
    text-overflow: ellipsis;
}

input[type="text"]:focus {
    border-color: initial;
    cursor: auto;
    transition-duration: 300ms;
}

Answer 5

没有机会用 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 类添加到父级。模糊时，此类被移除。