html - 仅 CSS : Show element whilst input is selected

Question

我想在选择输入字段时显示一个元素，但最好不要使用任何 JavaScript 来执行此操作。

因为我不能将元素放在输入字段中(很明显)，当输入字段处于事件状态时，我不能在我的 CSS 中定位它(我假设 :active 选择器可以用于输入字段是当前选中而不是用鼠标点击它)。

目前我有这样的结构:

<div class="outer">
  <input type="text" name="field" />
  <div class="element"></div>
</div>

在 :active 之后是否有 :root 选择器或类似的选择器来定位父元素？

现在我的 CSS:

.element {
  display: none;
}

.outer:active .element {
  display: block;
}

这基本上是有效的，但是只有当你在外部元素内的任何地方按住你的点击时才会显示该元素，我不想使用 :hover，完全卡在这里，我已经进行了一轮搜索，但找不到太多。

Answer 1

演示 - http://jsfiddle.net/victor_007/gu531aay/3/

.element {
  display: none;
}
input:focus ~ .element {
  display: block;
}

<div class="outer">
  <input type="text" name="field" />
  <div class="element">hello</div>
</div>