Css Focus on the appearance of the input div

Question

I have a code like this:

<div class="lighter"> <form method="get" action="http://www.google.pl" id="search"> <span> <input id="button_search" type="image" src="images/search.png" id="button_search"/> </span> <span> <input type="text" class="search rounded" placeholder="Search..."> </span> <div class= "list_search"> <ul> <li class="search_link"><a href="">Search all of Movies</a></li> <li class="search_link"><a href="">Advanced Search</a></li> </ul> </div> </form> </div> 

Is it possible to simply use css to have an effect when list_search appears when the input type = "text" is in focus? If so, how?

Thank you for help

Answer 1

This is possible with pure CSS, if you can change your markup a bit.

 div { background: #f0a; display: none; height: 200px; width: 200px; } input:focus + div { display: block; } 

What I essentially do is to hide the div first, and when the input field has focus, the next next match with the div changes its display to block .

For this to work, it must be the next next brother, since you cannot travel the DOM tree, so you need to expand your input field. from span .

See my fiddle: http://jsfiddle.net/TheNix/U28sd/

EDIT:
The adjacent selector ( + ) should work in IE7 and higher (although I think there may be some problems with asynchronously loaded content). Note that the item should appear immediately after that, so it’s just not the “next item that matches Y”, but actually the “item next to X if it matches Y”.

Several times, if you know the markup and want to hack, you can "count" your way down. input + div + div will target the second div , for example (assuming the markup matches exactly). Of course, I would not recommend it, as it will explode at the slightest change in your layout and it will be painful to support.

Read more about selectors here: http://www.w3.org/TR/CSS2/selector.html#adjacent-selectors

Answer 2

If you are using jQuery (which I highly recommend if you are just starting out in JS)

 $(':text').focus(function(e){ $('.list_search').toggle(); }).blur(function(e){ $('.list_search').toggle(); });