By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,739 Members | 1,081 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,739 IT Pros & Developers. It's quick & easy.

Stylizing a Search Input field With CSS

AutumnsDecay
100+
P: 170
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.autumnsolutions.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!
Mar 6 '08 #1
Share this Question
Share on Google+
1 Reply


drhowarddrfine
Expert 5K+
P: 7,435
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.
Mar 6 '08 #2

Post your reply

Sign in to post your reply or Sign up for a free account.