ionz149

When creating snazzy search forms be sure to wrap the input field in a div and add the background image to the div while setting the input background to transparent with no border. Make the div the actual size of image and make the input field be the size of the image minus all padding added to center text in input field vertically.

If you don’t wrap the input field in a div and someone starts typing a search query longer than the background image, the background image will begin to scroll left as you type. If you type enough the background just scrolls right out of view. Code below should be enough to get you headed in the right direction, obviously make the background image url point to an image on your server.

#searchform .input-bg {
background:url(images/input.png) no-repeat left top;
height:28px;
width:92px;}

#searchform input {
background:none;
border:none;
height:22px;
padding:3px 3px 3px 6px;
width:83px;}

<form id="searchform" action="#">
<div class="input-bg">
<input type="text" value="search" /></div>
<input id="searchsubmit" type="submit" value="Search" />
</form>

Edit: I used a drupal tutorial I found on styling the submit button to create an all css submit button that doesn’t add a bunch of weird xy coordinates in the url after submitting like an input type=image and the button tags do(?). It basically just shifts the text out of the way and makes the text color same as background creating the illusion of a nice button. View tutorial here. That css code looked like this (below) and matches the form html above.

#searchform #searchsubmit {
border:none;
background: url(images/search.png) no-repeat left top;
cursor: pointer;
display:inline;
height:28px;
letter-spacing:100px;/*moves text out of way for ie*/
text-indent: -9999px;
width:32px;}