仅限CSS：选择输入时显示元素

Question

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

由于我无法将元素放在输入字段中（显然），当输入字段处于活动状态时，我无法在CSS中将其作为目标（我假设：活动选择器可用于输入字段当前已选中，而不是单击鼠标）。

目前我有这样的结构：

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

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

我的CSS现在：

.element {
  display: none;
}

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

这实际上是有效的，但只有在外部元素中的任何位置按住你的点击时才会显示该元素，我不想使用:hover，完全卡在这里而且我已经进行了一轮搜索并且找不到多少。

Answer 1

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

你可以试试这个。当外部的输入字段被聚焦时，它将立即显示输入元素的下一个div，该元素位于outer元素内。

＆＃13;

＆＃13;

.element {
  display: none;
}

.outer input:focus + .element {
  display: block;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;