dimanche 12 juin 2016

CSS solution to make drop-down element visible while focused

I'm trying to figure out if there is any pure CSS solution to keep a drop-down element open while the input field of that element is focused? Here is an example:

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>

The idea is to keep the form visible when the search field is focused. Because when a user starts typing the search inquiry and the mouse move out of the hover zone, the form hides, and that's very annoying.

Side-question: Is it possible to focus via CSS search input element each time a <div> is hovered?

Aucun commentaire:

Enregistrer un commentaire