Comments on: Styling Your Search Form with CSS

By: Doug C.

Doug C. — Thu, 18 Mar 2010 15:04:48 +0000

Great article, as always. I was wondering if I want to put some text in the search box (say, for example, “Looking for something?”), how would I implement that?

Also, I live your comment form here. Any chance of getting the code? I would of course not make mine exactly the same, but it’s a great inspiration for something different.

By: gavin

gavin — Sun, 14 Mar 2010 19:33:06 +0000

I have copied your code but my button displays a couple of pixels below the search box and over to the right? How can I fix that?

Cheers

By: mars

mars — Tue, 09 Mar 2010 05:19:57 +0000

awesome, awesome solution. very clever! thank you for posting it!

By: Hasim Coskun

Hasim Coskun — Fri, 29 Jan 2010 01:04:54 +0000

nice article thx

By: Natti

Natti — Wed, 13 Jan 2010 21:36:36 +0000

Hi Soh, i was doing your first method and wondering why the image button would not align with the search input box, like you mentiond it..

The question is why? there is no reason to doing this?

ANYBODY know why the image button is not align with the search input box?

THX in advance

By: Kanuel

Kanuel — Fri, 08 Jan 2010 14:30:15 +0000

Thank you! That was a nice tut

By: Nat

Nat — Fri, 08 Jan 2010 14:27:50 +0000

Thanx Soh, though new on this but I’m learning a lot from you guys everyday keep it up dude!

By: mache

mache — Wed, 06 Jan 2010 12:20:43 +0000

hi… i’m a little lost with this, i’m sorry. i need to know how should then i design the search_bg.gif image… is it just one bar and a button all together, or three of them in one image as you showed on the beginning of the post. … again sorry my ignorance.

By: Mads

Mads — Tue, 03 Nov 2009 10:19:47 +0000

Thanks for the tutorial.

I’ve got it working perfectly except on my Mac with Safari and Chromium the search button appears beneath the input box. I’ve tried everything and it just doesn’t want to be placed inline…

By: NETZFANG

NETZFANG — Mon, 26 Oct 2009 10:26:53 +0000

Great Work.

add
::-moz-focus-inner { border: 0; }
to your css to remove the dotted focus of the search button in Firefox.