How to get this kind of style on a text box

  • Travis Coats
  • Graduate
  • Graduate
  • Travis Coats
  • Posts: 107

Post 3+ Months Ago

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. :D
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

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.

Attachments:
rev2.jpg
  • Travis Coats
  • Graduate
  • Graduate
  • Travis Coats
  • Posts: 107

Post 3+ Months Ago

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.
  • Travis Coats
  • Graduate
  • Graduate
  • Travis Coats
  • Posts: 107

Post 3+ Months Ago

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.
  • ScienceOfSpock
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1892
  • Loc: Las Vegas

Post 3+ Months Ago

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:
Code: [ Select ]
<input id="searchsubmit" type="image" src="http://www.revolutiontwo.com/demo/chrome/wp-content/themes/chrome_10/images/search.gif" alt="Submit" />


And some styling on the actual input for the search:
Code: [ Select ]
#searchwrap #s{
border: none;
padding: 5px 0 5px 0;
margin: 0;
width: 215px;
}
  1. #searchwrap #s{
  2. border: none;
  3. padding: 5px 0 5px 0;
  4. margin: 0;
  5. width: 215px;
  6. }
  • CXLink
  • Expert
  • Expert
  • User avatar
  • Posts: 685
  • Loc: ATL-GA

Post 3+ Months Ago

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

Post 3+ Months Ago

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

Post Information

  • Total Posts in this topic: 7 posts
  • Users browsing this forum: No registered users and 97 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.