How do I add a "search" button in a text input field?

Question

How do I create a similar “search” element to the one in this site?

If we view source, he has one textbox followed by a <span> tag.

<input type="text" name="q" id="site-search-input" autocomplete="off" value="Search" class="gray" />
<span id="g-search-button"></span>

Where do I get a similar "magnifying glass" image?

Answer 1

Put the image into the span, for example using background-image, then give it a relative position and move it to the left so it overlaps the right end of the search box, for example:

#g-search-button {
  display: inline-block;
  width: 16px;
  height: 16px;
  position: relative;
  left: -22px;
  top: 3px;

  background-color: black;  /* Replace with your own image */
}

Working example on JSBin

Answer 2

Your eyes are deceiving you. The button is not within the text box. Using a background image is NOT the way to go, as it wont provide the clickable submit button.

What you need to do is add a wrapper div around the input:text and input:submit.

The wrapper will look like it's a text box, but will actually contain a transparent text box and a submit button. You'll need to specifically remove the styles for the input:text and input:submit elements.

It's very important that you keep the submit button, otherwise hitting enter while searching will not have a default reaction. Additionally placing the submit button after the text field allows people to actually click on the button.

You can make your own magnifying image, they're pretty easy to make in a 20x20px transparent png.

.search {
  border: 1px solid #000000;
  width: 200px;
}

.search input[type="text"] {
  background: none;
  border: 0 none;
  float: left;
  height: 1.5em;
  line-height: 1.5em;
  margin: 0;
  padding: 3px 0;
  width: 180px;
}

.search input[type="submit"] {
  background: #CCCCCC url(path/to/image.jpg);
  border: 0 none;
  height: 1.5em;
  line-height: 1.5em;
  margin: 0;
  padding: 3px 0;
  text-indent: 100px;
  width: 20px;
}

<form ...>
  <div class="search">
    <input type="text" />
    <input type="submit" />
  </div>
</form>

Answer 3

If you view the page in Google Chrome, right-click on the search button and select “Inspect element”, you’ll be able to see the CSS used to achieve this effect.

If you’re not familiar with CSS, I thoroughly recommend ‘CSS: The Definitive Guide’.

Answer 4

If you use a background image on the field then there's no way to bind to it to get the click action. So the solution is to have a separate search field and image, so you can bind click event in jQuery to the image. Fiddle here:

http://jsfiddle.net/Lzm1k4r8/23/

You can adjust left: position to be left or right side of the search box.

Answer 5

A site like Iconspedia has a number of free icons that are similar.

Wherever you get the icon be careful to ensure that you have the rights to use it in your application. Many graphics are protected and some have restrictive licenses.

Answer 6

I'd like to plug a new jQuery plugin I wrote because I feel it answers to the OP's request. It's called jQuery.iconfield: https://github.com/yotamofek/jquery.iconfield.

It lets you easily add an icon to the left side of your text field. For using the icon as a button, you can easily bind to the 'iconfield.click' event, which is triggered when the user clicks the icon. It also takes care of changing the cursor when the mouse is hovering over the icon.

For instance:

$('#search-field').iconfield( {
    'image-url':   'imgs/search.png', // url of icon
    'icon-cursor': 'pointer'          // cursor to show when hovering over icon
} );
$('#search-field').on( 'iconfield.click', function( ) {
    $('#search-form').submit()
}

I would love to get some feedback on my work.

Answer 7

To help with user feedback why not add the pointer icon to your mouse when you're hovering over the magnifying glass? Just att this to your CSS:

.search:hover { cursor:pointer; }