Title Over Search Input

One of customization I’ve done for this WordPress  theme was to put label text over search input.   I’ve found that quite nice design element and space saving optimization.

Basically there are 2 main approaches:

a) Use HTML5

This is very straightforward, but I did not like  usability of the solution – the problem is that label disappears only after you write your first letter, which I have to say I found bit annoying.
But solution is super-simple, just add attribute  placeholder

 

b) Use <label> tag, plus style, plus javascript

HTML:

CSS:

Javascript (requires JQuery library):

For WordPress theme it is recommended to have JavaScript in A separate file – the proper way to load code on page is using PHP function wp_enqueue_script:

The best place to put this code is functions.php in the theme – the function which is called on wp_enqueue_scripts action.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">