.comment-link {margin-left:.6em;}

Creative Web Development - CSS, XHTML, Javascript and RTML for Yahoo Store

Saturday, January 21, 2006

Default search input text, and using CSS to clean up your search box

Quick one tonight, a nice simple script so your search box is a little more informative. By using the following code your search input will have the text "Enter Keywords", and it will disappear when the user clicks in the box. If they don't enter anything, it will reappear, otherwise it will let their entered text remain.

Is it necessary? Nope. But you might as well make it as simple as possible for those who are newer to the web - especially considering how little code it actually is.

<input 
 type="text" 
 name="query" 
 class="search" 
 value="Enter Keywords!" 
 onfocus="if(this.value=='Enter Keywords!') 
             this.value='';" 
 onblur="if(this.value=='') 
            this.value='Enter Keywords!';" />


And you can add the following CSS code to make it a little cleaner looking.

.search {
    border: 1px inset #000080;
    width: 150px;
    font: normal 11px verdana;
    padding: 1px;
    height: 18px;
}


1 Comments:

  • I am an IT student and it's really good to learn something new from here. Thanks for sharing the source code.

    By Anonymous online store builder, at 6:26 AM  

Post a Comment

Links to this post:

Create a Link

<< Home

Google
 
nunzi.blogspot.com    Web