使下拉元素在聚焦时可见的 CSS 解决方案

Question

我想弄清楚是否有任何 纯 CSS 解决方案可以在该元素的输入字段聚焦时保持下拉元素打开？这是一个例子：

div {
  width: 300px;
  line-height: 50px;
  text-align: center;
  background: #e8e8e8;
  border: 1px solid #666;
}

div:hover form {
  display: block;
}

form {
  display: none;
  padding: 0 15px;
}

<div>Hover Me
<form class="search">
<input type="search" placeholder="What are you looking for?" autofocus>
<input type="button" value="Search!">
</form>
</div>

这个想法是在搜索字段获得焦点时保持表单可见。因为当用户开始输入搜索查询并且鼠标移出悬停区域时，表单会隐藏，这很烦人。

附带问题：每次悬停<div> 时，是否可以通过 CSS 搜索输入元素进行聚焦？

Answer 1

解决方案已经提出，但缺少浏览器支持：

9.4. The Generalized Input Focus Pseudo-class: :focus-within

:focus-within 伪类适用于 :focus 伪类适用。

一个元素也匹配:focus-within，如果它的一个 shadow-including descendants 匹配 :focus。

div {
  width: 300px;
  line-height: 50px;
  text-align: center;
  background: #e8e8e8;
  border: 1px solid #666;
}
div:hover form, div:focus-within form {
  display: block;
}
form {
  display: none;
  padding: 0 15px;
}

<div tabindex="-1">Hover Me
  <form class="search">
    <input type="search" placeholder="What are you looking for?" autofocus>
    <input type="button" value="Search!">
  </form>
</div>

同时，您可以使用polyfill：

div {
  width: 300px;
  line-height: 50px;
  text-align: center;
  background: #e8e8e8;
  border: 1px solid #666;
}
div:hover form, div.focus-within form {
  display: block;
}
form {
  display: none;
  padding: 0 15px;
}

<script src="https://gist.githubusercontent.com/aFarkas/a7e0d85450f323d5e164/raw/"></script>
<div tabindex="-1">Hover Me
  <form class="search">
    <input type="search" placeholder="What are you looking for?" autofocus>
    <input type="button" value="Search!">
  </form>
</div>

Answer 2

等等。实际上有一个纯 CSS 解决方案。但是有一个缺点——它只适用于一个<input> 标签，而没有<form> 标签，像这样：

div {
  width: 300px;
  line-height: 50px;
  text-align: center;
  background: #e8e8e8;
  border: 1px solid #666;
  padding: 0.5%;
}
input {
  display: none;
  margin: auto;
}
div:hover input {
  display: block;
}
input:focus {
  display: block !important
}

<div>Hover Me
  <input type="search" placeholder="What are you looking for?">
  </form>
</div>

但是，您可以让用户通过按键盘上的 Enter 来搜索表单。不幸的是，这需要 JavaScript，这违背了本文的全部目的。

我还注意到您的占位符文本并不能正常工作，因为“搜索”文本仍然存在。有两种解决方案 - 使用 JavaScript 修复它，或者将输入标签的“类型”更改为“文本”。