A button inside an input field.

  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

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

Post 3+ Months Ago

  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

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>
  9. <!-- ... -->
  10. <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>
  2. <!-- ... -->
  3. <input type="checkbox" id="mybox" name="mybox"/>
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

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.

Post Information

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