Back To Website Design Forum

A button inside an input field.

  • Bogey
  • Bogey
  • Genius
  • User avatar
  • Joined: Jul 14, 2005
  • Posts: 8211
  • Loc: USA
  • Status: Offline

Post October 8th, 2007, 5:27 pm

Or something like that. I saw sites that have a search option with a magnifying glass inside the input field and you click on it to begin to search. I don't know how they do it or maybe they put an image right against the right side of the input field. Or maybe it was just a background image and you I'm imagining that you click on it.
"Bring forth therefore fruits meet for repentance:" Matthew 3:8
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post October 8th, 2007, 5:27 pm

  • joebert
  • Sledgehammer
  • Genius
  • No Avatar
  • Joined: Feb 10, 2004
  • Posts: 13455
  • Loc: Florida
  • Status: Offline

Post October 8th, 2007, 5:47 pm

It's usually a background image you're seeing, left padding makes it seem like the image is part of the textbox.

Code: [ Select ]
<style type="text/css">
#q
{
  background-image: url("icon.png");
  background-repeat: no-repeat;
  padding: 0 0 0 20px;
}
</style>

<!-- ... -->

<input id="q" name="q" type="text"/>
  1. <style type="text/css">
  2. #q
  3. {
  4.   background-image: url("icon.png");
  5.   background-repeat: no-repeat;
  6.   padding: 0 0 0 20px;
  7. }
  8. </style>
  10. <!-- ... -->
  12. <input id="q" name="q" type="text"/>


Another method of doing it is a label element.
If you're unfamiliar with a label element, what it does is allow any child elements to act as a focuser of an input element.

There's two ways to use a label element,
Code: [ Select ]
<label><input type="checkbox"/> Clicking this text will check the box</label>

Code: [ Select ]
<label for="mybox">Clicking this text will check the box</label>

<!-- ... -->

<input type="checkbox" id="mybox" name="mybox"/>
  1. <label for="mybox">Clicking this text will check the box</label>
  3. <!-- ... -->
  5. <input type="checkbox" id="mybox" name="mybox"/>
  • Bogey
  • Bogey
  • Genius
  • User avatar
  • Joined: Jul 14, 2005
  • Posts: 8211
  • Loc: USA
  • Status: Offline

Post October 8th, 2007, 5:50 pm

Okay thanks joebert. And also, thanks for the label method thing. It seems cool.

I guess the image inside an input field can never be clickable.
"Bring forth therefore fruits meet for repentance:" Matthew 3:8

Page 1 of 1

Post Information

  • Total Posts in this topic: 3 posts
  • Users browsing this forum: No registered users and 155 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
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.