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

时间:2016-06-11 19:54:45

标签: css css3 css-selectors

我试图找出是否有任何纯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>
&#13;
&#13;
&#13;

我们的想法是在搜索字段聚焦时保持表单可见。因为当用户开始键入搜索查询并且鼠标移出悬停区域时,表单会隐藏,并且非常烦人。

提问题:每次<div>悬停时,是否可以通过CSS搜索输入元素进行关注?

2 个答案:

答案 0 :(得分:1)

该解决方案已经提出,但缺乏浏览器支持:

  

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

     

:focus-within 伪类适用于其中的元素   :focus伪类适用。

     

如果其中一个元素,则元素也匹配:focus-within   shadow-including descendants匹配:focus

&#13;
&#13;
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;
}
&#13;
<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>
&#13;
&#13;
&#13;

同时,您可以使用polyfill

&#13;
&#13;
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;
}
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

等待。实际上有一个纯CSS解决方案。但是有一个缺点 - 它仅适用于一个var data = [40,50,60,70,80] var days = ["Mon","Tue","Wed","Thu","Fri"] var yAxis = d3.svg.axis() .scale(y) .orient("left") .ticks(5) .tickFormat(function (d,i) { return days[i]; }); 标记,而且没有<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
}

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

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