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

我有一个元素，我想在选择输入字段时显示它，但我最好不要使用任何JavaScript来完成这项工作

因为我不能将元素放在输入字段中（显然），所以当输入字段处于活动状态时，我不能在CSS中将其作为目标（我假设：active选择器可以用于当前选中的输入字段，而不是让鼠标单击它）

目前我有一个这样的结构：

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

这基本上是可行的，但是只有当您按住外部元素中的任何位置时，元素才会显示出来，我不想使用

：hover

，完全卡在这里，我已经搜索了一轮，找不到太多。

演示-

.element{
显示：无；
}
输入：focus~.element{
显示：块；
}

你好

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

outer

元素内部

.element{
显示：无；
}
.外部输入：焦点+.元素{
显示：块；
}

你好

+1-我以前从未见过，这非常有用。我不知道你能做到！非常感谢，我现在几乎每天都在用这个，哈哈，谢谢。

.element {
  display: none;
}

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