How to get this kind of style on a text box

Example

I've been waiting for the right example to come along and I have found one. Right now I am using a flash search box...why you ask? Who knows, I was going to spruce it up using all the need vector graphic tools in Flash, but I ended up with nothing special. Can anyone reverse engineer the example above? I would love to get into styling my Form text fields like this for more originality and creativity. No hates plain a$$ form inputs more than I do.

Thanks for any feedback.

The <input> isn't styled. In fact, it's un-styled. There's a background image in one of the containing <div>'s.

If you're using IE, you should install the IE Developer Toolbar. You can select elements by clicking on them then see how they're placed in the structure of the document.

That is a nice tool, unfortunately I use Firefox on the Mac. I miss the feature in FF2 where you could look into the DOM - I can't find that feature in 3.

As for the input, that's a nifty little trick using the background image like that I noticed that when you focus on it, the input is actually not centered on the graphic. It's always the simple things that stand out. So I am assuming they used an image for the GO graphic and made it a form submit some way. Thanks for sharing that neat tool. I will download it on my PC station downstairs. I like when you can take apart a page by it's structure, helps a lot when brainstorming new creative ideas.

Does anyone know how to make something like this - I tried playing around with a few approaches in DW and I couldn't get it remotely close to save my life.

Well, if you're talking about the "GO" search box, it's quite simple. They're using a background image:
http://www.revolutiontwo.com/demo/chrom ... ightbg.jpg

A transparent gif as a submit button:


And some styling on the actual input for the search:

Also Travis if you want a tool similar to developers toolbar you can get Firebug for FF it works on both PC and Mac.

Thanks SOS - I will play around with it later and see if I can get a similar effect for my search bar on the site.

CX: Really appreciate that tip, I am downloading it right now.

Thanks