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