演示

Question

让我们说你有类似的东西：

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

我希望在孩子获得焦点时更改父/兄弟姐妹的外观。做这样的事情有什么CSS技巧吗？

修改

我的问题原因如下：

我正在创建一个需要可编辑文本字段的Angular应用。它应该看起来像一个标签，直到它被点击，此时它应该看起来像一个普通的文本输入。我基于以下方式设置文本字段的样式：焦点以实现此效果，但文本被文本输入的边界切断。我还使用ng-show，ng-hide，ng-blur，ng-keypress和ng-click在标签和文本输入之间切换，基于模糊，按键和点击。除了一件事之外，这个工作正常：在标签'ng-click =＆＃34; setEdit（this，$ event）＆＃34;之后将ng-show和ng-hide使用的edit boolean更改为true，它使用jQuery调用.select（）文本输入。但是，直到完成ng-click之后，所有内容都是$ digest，所以文本输入再次失去焦点。由于文本输入实际上从未实际获得焦点，因此使用ng-blur恢复显示标签是错误的：用户必须单击文本输入，然后再次单击它以恢复显示标签。

修改

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

Answer 1

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

新的CSS伪类:focus-within可以帮助解决这类问题，并在人们使用Tab键进行导航时提供可访问性，在使用屏幕阅读器时很常见。

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

：focus-within伪类匹配自身的元素匹配：焦点或具有匹配的后代：焦点。

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

演示

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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类添加到父级。在模糊时，此类将被删除。

Answer 3

您可以使用纯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 4

尝试contenteditible属性。但是，这可能需要更多工作才能将其转换为可用的表单数据。

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

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

CSS：改变孩子焦点的父母

4 个答案:

演示