CSS: 改变父节点对子节点的关注

假设你有这样的东西:

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

我想在孩子获得焦点时改变父母/兄弟姐妹的外观。有没有任何 CSS 技巧来做这样的事情？

编辑:

我提出这个问题的原因如下:

我正在创建一个 Angular 应用程序，它需要可编辑的文本字段。在单击之前，它应该看起来像一个标签，此时它应该看起来像一个正常的文本输入。我根据: focus 来设置文本字段的样式，以达到这种效果，但是文本被文本输入的边界隔开。我还使用了 ng- 显示、 ng- 隐藏、 ng- 模糊、 ng- 按键和 ng- 点击来在标签和基于模糊、按键和点击的文本输入之间切换。除了一件事: 在标签的 ng-click = “ setEdit (This，$event)”将 ng-show 和 ng-hide 使用的编辑布尔值更改为 true 之后，它使用 jQuery 调用。Select ()文本输入。但是，直到完成 ng-click 之后，所有内容才被 $享用，因此文本输入再次失去焦点。由于文本输入实际上从未获得焦点，因此使用 ng 模糊恢复为显示标签是有问题的: 用户必须单击文本输入，然后再次单击输入，才能恢复为显示标签。

编辑:

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

104215 次浏览
小开

没有机会使用 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将被添加到父类中。在侠影上，这个类被移除了。

小开

可以使用纯 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;
}
小开

尝试可内容属性。然而，这可能需要更多的工作来将其转换为可用的表单数据。

Http://jsfiddle.net/michaelburtonray/c4bz6/20/

<span class="parent" contenteditable>Click me</span>
小开
最佳答案

您现在可以在纯 CSS 中完成此操作，因此不需要 JavaScript

新的 CSS 伪类 :focus-within将有助于这样的情况，并将有助于访问时，人们使用标签导航，常见的时候使用屏幕阅读器。

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

在伪类中的: 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>

小开

你甚至可以像下面这样设计聚焦内而不是(聚焦内)(不需要使用 JavaScript = > 更容易和更快) :

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


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

提交答案