How to show any div when a textbox is focused?

Question

How can I show the div.show when input.searchtext is focused?

<div class="select-form-holder">
   <input class="searchtext" type="text" value="Find Friends, Movies, T.V shows Games" />
   <div class="show-on-focus">xyz</div>
   <input type="submit" class="btn-search" title="Search" />
</div>

Answer 1

.searchtext:not(:focus) + .show-on-focus {
    display: none;
}

It reads: "If searchtext is not :focused, get the next sibling if it is show-on-focus".

Answer 2

Another way of accomplishing this using just an adjacent sibling selector.

.show-on-focus { display: none }
.searchtext:focus + .show-on-focus {
    display: block;
}

If you have multiple elements you want to hide, you can swap out the adjacent selector with a general sibling selector.

.show-on-focus { display: none }
.searchtext:focus ~ .show-on-focus {
    display: block;
}

Both are not as sexy as :not, but it'll have slightly better compatibility with older browsers.