Stylizing a Search Input field With CSS

[AutumnsDecay]

Hey there everyone.

I've been searching through the pages here and out on the internet, and I can honestly say I cannot find what I'm looking for.

What I'm in need of, for a client of mine, is the appropriate CSS / HTML code the insert a search bar onto the site. HOWEVER, the search input field needs to be custom. I've seen it done before, but am not able to determine how, exactly, it's done.

I don't want the traditional OS input fields and submit buttons. I can figure out the button, I'm sure, but it's the whole "making your search field looking the way you want it to" part that I'm having trouble with.

If you take a look at the site (currently only looks nice in IE, will convert for FF later), you'll see what I'm trying to do.

www.autumnsolut ions.org/autumnsolutions .org/CDT

You can see why I want to change the look and feel of the search input form. I would like to replace it with this:

http://autumnsolutions .org/autumnsolutions .org/CDT/images/topbarinput.jpg

If anyone can help me out, it'd be greatly appreciated!

Thanks!

[drhowarddrfine]

1) We never, ever write markup using IE and then "convert" to Firefox. All versions of IE, including the new IE8 coming out soon, are 10 years behind web standards and wrong. Always, always use a modern browser like Opera or Firefox or Safari to initially test your page, while checking to see how IE screws it up. THEN adjust for IEs quirks and bugs.

2) You aren't using a doctype. This puts IE into "quirks mode" and it will act like it's 1998 all over again. See the article about doctypes under Howtos above in the html/css section.

3) Styling forms is limited but there are ways to do it. Personally I haven't done much with it myself along the lines you are looking for.