I want to place a div under a input form element, to show hints on what to type into that field, and hide it with javascript when the user inputs an actual value. I figured it should work something like that, but i can only select the hint and can't place the cursor in the input field.

Is there a css-way of doing this? Or do I have to build that in the script as well?


html

   <form method="post" action="">
     <div class="form_item">
       <input type="text" id="search_query" name="search_query" value=""/>
       <div id="search_hint" class="hint">here goes the hint</div>
     </div>
     <div class="form_item"><input type="submit" value="Search"/></div>
   </form>

css

 #search_query {
    z-index: 300;
  }

  #search_hint {
    left: 5px;
    position: absolute;
    top: 3px;
    z-index: 1;
  }

1 answer

Mottie 1134
0
points

I think you'll have to use javascript to do this, that is unless you want to use the adjacent sibling selector which should work (demo ) but is buggy in IE and Safari:

#search-query:focus+#search_hint {
 display: inline;
}
Answered about 6 years ago by Mottie