467,074 Members | 923 Online
Bytes | Developer Community
Ask Question

Home New Posts Topics Members FAQ

Post your question to a community of 467,074 developers. It's quick & easy.

Stylizing a Search Input field With CSS

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.


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:


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

Mar 6 '08 #1
  • viewed: 2061
1 Reply
Expert 4TB
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.

Similar topics

1 post views Thread by Eric | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.