Input Box Image

[AshtonHogan]

Hi,

Can someone tell me how to make an image next to an input field? Something like what you would find at http://www.facebook.com or http://twitter.com when looking at the search field input box, you'll notice a picture of a magnifying glass - How do they do this?

Thanks,
Ashton.

[Kraai]

Hi

You can put an image as a submit button on a search bar by editing the form input code like this:

<input type="image" src="path/to/image.png" name="submit" alt="submit">

[AshtonHogan]

Hi,

Thanks. Just one question - how do you connect it to the search bar once you've done this?

[mahavir123]

<form name="frmName">
Search : <input type="text" size="50" />&nbsp;<img src="submit.jpg" alt="Submit" width="121" height="60" style="cursor:pointer" onclick="document.frmName.submit()" />
</form>

[AshtonHogan]

I understand, thanks for your help.

What I want is actually something similar to twitter... I've tried everything but the best I can do is get a search bar like the one in the attachment.

Thanks,
Ashton.

[Arkinder]

Twitter is using a simple text input. The rounded borders are from the CSS3 border-radius property.

<input value="" placeholder="Search" name="q" id="search-query" type="text">

The magnifying glass is the background image of an element, and they are absolutely positioning it with a right: 0;

Regards, Arkinder

[AshtonHogan]

Hi,

Thanks a lot.

The problems with that though however is that:
1. When you type in the search box, the text will appear on the foreground of the image as soon as enough characters have been entered.

2. You can't click on the magnifying glass, it's not a button, just a picture.

Thanks,
Ashton.

[Adrian Kiwee]

The magnifying glass is not just a picture, it has a javascript code on it so it does something when clicked.
Here's what the facebook search has on it:

<button title="Search" onclick="var q = $(&quot;q&quot;);if (q.value == q.getAttribute(&quot;placeholder&quot;)) {q.focus(); return false;}" type="submit"><span class="hidden_elem">Search</span></button>

And this is the code for the input tag:

<input type="text" title="Search" value="Search" spellcheck="false" onfocus="return wait_for_load(this, event, function() {JSCC.get('j4ced158d84cb642469710823').init([&quot;searchRecorderBasic&quot;]); ;});" tabindex="" autocomplete="off" placeholder="Search" onclick="var q = $(&quot;q&quot;);if (q.value == q.getAttribute(&quot;placeholder&quot;)) {q.focus(); return false;}" name="q" id="q" accesskey="/" class="inputtext DOMControl_placeholder">

Both the input and the button are inside a span. This means you need either a javascript to do an action when pressing the button near it, or just place a link. Adding a picture won't do nothing.

[Arkinder]

Adrian Kiwee is correct. Twitter is using jQuery (a form of JavaScript) to make the span clickable. This is straight from Twitter.

<form id="search-form" action="/search" method="GET">
    <span id="glass">
        <i></i>
    </span>
    <input value="" placeholder="Search" name="q" id="search-query" type="text" />
</form>

The i tag has the magnifying glass as a background.

#search-form span.glass i {
    background-image: url(http://s.twimg.com/a/1290538325/phoenix/img/sprite-icons.png);
    background-position: -224px -96px;
    display: block;
    font-size: 0px;
    height: 14px;
    width: 14px;
}

and then the span is being absolutely positioned.

#search-form span.glass {
    cursor: pointer;
    display: block;
    padding: 7px 8px 5px;
    position: absolute;
    right: 0px;
}

The input itself,

#search-form #search-query {
    -webkit-box-shadow: #444 0px 1px 0px;
    background: #666;
    border: 1px solid black;
    border-bottom-left-radius: 4px 4px;
    border-bottom-right-radius: 4px 4px;
    border-top-left-radius: 4px 4px;
    border-top-right-radius: 4px 4px;
    color: #CCC;
    font: normal normal normal 13px/normal Arial, sans-serif;
    padding: 6px 6px 4px;
    width: 240px;
}

The form has a few stylings also but they are used to allow the search bar to play well with its surrounded elements.

Regards, Arkinder

*This is purely for educational purposes. Source: Twitter.com

[Metamorphosis]

To have a search box with a magnifying glass, you can simply create a css class and apply it directly to the box.

Inside the class you would set the background image to a magnifying glass and then set the padding-left property to a value slightly further than the image to the right.

Here is a sample snippet of code I wrote:

<!DOCTYPE HTML PUBLIC "-//W3C/DTD HTML 4.01//EN"
  "http://www.w3c.org/TR/html4/strict.dtd">

<html>
<head>
<title>Magnifying Glass</title>
<style type="text/css">
<!--
.special_text
{
    height: 18px;
    border: 1px solid black;
    padding: 3px 3px 3px 23px;
    background-image: url('magnify.jpg');
    background-position: 3px 50%;
    background-repeat: no-repeat;
}
-->
</style>
</head>
<body>
    <form action="#" method="post">
            <input type="text" name="query" size="20" maxlength="20" class="special_text">
    </form>
</body>
</html>

See the image attachment for a preview of this effect.

As always, it's best to use semantically proper markup and make your codemeaningful than to use unnecessary span tags and code that doesn't mean much just to achieve a presentational style.

[Arkinder]

The span has nothing to do with "achieving a presentational style", and it's hardly meaningless.

When using firebug to replace Twitter's search bar with yours - you can't click the magnifying glass to search, and since it's set as a background image for the input I can't use jQuery to make it clickable. Wow, I really wish I had another element that I could position over my search bar that has the magnifying glass in it or as a background image - that way I could click on it to search. On Windows, Leopard, and Ubuntu a magnifying glass is used to represent search, and that's just what I'm accustomed to. According to a study done by Seagate, in 2005, 76% of American's owned a personal computer. According to the CIA World Factbook there are an estimated 1,018,057,389 internet users worldwide - conducted in the year 2005. That's a lot of people accustomed to clickable images, and was 5 years ago.

7 months ago Twitter had 105 million registered users and counting. I highly doubt that they have novice programmers working for them, and doubt even more that any piece of their code is meaningless.

Regards, Arkinder

The magnifying glass used is from Wikipedia.org and can be found here .

[Metamorphosis]

The original post didn't ask about a clickable magnifying glass. He just asked to have an image inside the input box.

As for the last part of my post it was meant to encourage that person to always keep the structure and semantics of their pages in mind rather than bending over backwards just to get some particular style perfected as i've seen many cases throughout the years where as the code base grows it has a tendency to become more and more sloppy with redundant tags that don't convey any real meaning. Just because something works doesn't mean that it's done well. Take myspace for example. Their code base is/was absolutely hideous -- there don't even appear to be any standard coding guidelines as evidenced by different indentation sizes and brace alignment styles within the same block of code.

On a side note, i'm sure that twitter and facebook have most likely done a better job though.

[Arkinder]

I understand, and it's a very good thing to encourage. However, if you read all of the original poster's messagers, you will see that he or she had requested something similar to Twitter's search bar. After posting just the input from Twitter's code the poster ran into the problem of, "You can't click on the magnifying glass, it's not a button, just a picture." So the rest of Twitter's code was posted - just pointing out that the user did in fact ask.

Myspace was originally coded in 2003, long before standards had really taken hold - they still haven't really. There's no debating that their code is sloppy at best; but if you became the biggest social networking site for a few years after being created in 10 days - would you like trying to rewrite the code? It's a nightmare and they know it.

Regards, Arkinder

[jonschatz]

To have a search box with a magnifying glass, you can simply create a css class and apply it directly to the box.

Inside the class you would set the background image to a magnifying glass and then set the padding-left property to a value slightly further than the image to the right.

Here is a sample snippet of code I wrote:

<!DOCTYPE HTML PUBLIC "-//W3C/DTD HTML 4.01//EN"
  "http://www.w3c.org/TR/html4/strict.dtd">

<html>
<head>
<title>Magnifying Glass</title>
<style type="text/css">
<!--
.special_text
{
    height: 18px;
    border: 1px solid black;
    padding: 3px 3px 3px 23px;
    background-image: url('magnify.jpg');
    background-position: 3px 50%;
    background-repeat: no-repeat;
}
-->
</style>
</head>
<body>
    <form action="#" method="post">
            <input type="text" name="query" size="20" maxlength="20" class="special_text">
    </form>
</body>
</html>

See the image attachment for a preview of this effect.

As always, it's best to use semantically proper markup and make your codemeaningful than to use unnecessary span tags and code that doesn't mean much just to achieve a presentational style.

Thanks a lot! This worked perfectly for what I wanted and it's very simple.

[NZprog]

I used the solution posted by Arkinder - Much gratitude.
It works well in Safari(both on Mac and PC) and the iPhone Simmulator(Mac). Unfortunately, when I test it in Safari on an iPad the image within the span isn't displaying. The exists, is clickable and executes it's javascript functionality, but a user wouldn't know it exists without the image displaying.
Any thoughts on this?
Thank you in advance.

[NZprog]

I found my iPad problem. My iPad doesn't work well with jQuery fadeIn or fadeOut.
Again, thank you for the above solution.