custom search forms? - Webmaster Forum - Web Design, Programming and SEO forums

06-04-2009, 12:37 PM

echoepidemic

Status: Graphic Designer
Join date: Apr 2005
Location: Vancouver
Expertise:
Software:

Posts: 2,057

iTrader: 0 / 0%

echoepidemic is on a distinguished road

custom search forms?

I want my search bar to look like this:

And I really ahve no idea where to start. My current site is just using the standard one... some php thing?

06-05-2009, 07:59 AM

Replicada

Status: I'm new around here
Join date: Jun 2009
Location: Manchester, UK
Expertise:
Software:

Posts: 3

iTrader: 0 / 0%

Replicada is on a distinguished road

I would simply create an input field and then give it a background image, so something like this:

Code:

html code

<input id="search" type="text" name="search" />

Code:

css code

#search
{
width:??px;
height:??px;
background:url(locationofimage/image.jpg) no-repeat;
}

Obviously replacing ?? with numbers of pixels.

There are probably more cross-browser methods of doing this for example setting it as a background image in a div and using positionings to position the input area within the div, so that it doesnt overlap the image with a background of white. That would be better but it involves a far greater understanding of code, and could look off when they are inputting data.

Dan

06-05-2009, 08:47 PM

echoepidemic

Status: Graphic Designer
Join date: Apr 2005
Location: Vancouver
Expertise:
Software:

Posts: 2,057

iTrader: 0 / 0%

echoepidemic is on a distinguished road

i made the search button have the image but now they don't align properly

It looks different in each browser I try too.

edit:

Nevermind actually, I think i've got it figured out.

06-24-2009, 11:17 AM

dgryan

Status: Member
Join date: Jun 2009
Location: Syndey
Expertise: Ruby On Rails
Software:

Posts: 109

iTrader: 3 / 100%

dgryan is on a distinguished road

if you havnt let me know, I can give you a hand.

06-26-2009, 01:03 PM

danmoore

Status: I'm new around here
Join date: Oct 2007
Location: Perth, Western Australia
Expertise:
Software:

Posts: 18

iTrader: 0 / 0%

danmoore is on a distinguished road

Even though you've figured it out, I'm going to reply anyway for the sake of those who are stuck in this (oh so common) predicament.

It does depends on how you've structured you html, but this is how I would do it.

HTML

Code:

<form action="xyz" method="post">
  <label for="searchSite">Search</label>
  <p>
    <input type="text" name="search" id="f_searchSite" class="search-field" />
    <input type="image" src="path/to/image.gif" class="submit" />
  </p>
</div>

CSS

Code:

input.search-field { float: left; border: 0; background: #fff; width: 100px; }
input.submit { float: left; width: 25px; height: 25px; margin: 0 0 0 -25px; }

now lets break this down.

its a common issue where by the submit button and the input field don't line up correctly when you've got them side by side. the best and easiest method is to float them both (to the left in this case) to line them up.

working off the OPs image, the submit button is actually over the top of the input, so thats where we apply the negative margin on the left of (in this instance) the width of the submit button.

personally, if I was building a similar search field, my submit button would actually be a transparent gif with a matt white edge so that it will always look 'inside' the input field behind.

very quick application to fixing the uneven search options. and this method is definitely open to variations.

hope this helped.