Input button from image using css

Question

Hiya,

Take a look at this picture, how can I use this image for my search input and the right part of the image(the magnifier) to use as a button for submitting search. What is the best way to do this? Thank you

Answer 1

The best way to do this would be to split the image into two parts.

Then use code similar to the following:

<input type="text" name="search_text" ... />
<input type="image" src="right_part.png" alt="Search" ... />

And CSS like (obviously use class selectors if you want to include pre IE7 browsers):

input[type='text'] { float: left; background: url('left_part.png') no-repeat; width: width-of-left-partpx; height: height-of-left-partpx; line-height: height-of-left-partpx; }
input[type='image'] { float: left; width: width-of-right-partpx; height: height-of-right-partpx; line-height: height-of-right-partpx; }

Answer 2

Further to Tim's answer, I think the best way to do this would be to use the same background image and position it inside the form elements. Example below:

Form HTML:

<form action="your form action here" method="post">
<input type="text" id="searchfield" name="searchfield" value="Search"/>
<input type="submit" id="submit" name="submit" value="" />
</form>

CSS:

input { float:left; }
input[type="text"] { height:14px; width:118px; border:none; padding:3px 5px; background:url('search.jpg') top left no-repeat; }
input[type="submit"] { height:20px; width:22px; border:none; background:url('search.jpg') top right no-repeat; }