How to Create a Search Button within a Text Input Field?

Creating a Search Button within a Text Input Field

To achieve the search element seen in the provided screenshot, you require both a text input field and an adjacent span element.

The text input field can be created using the following code:

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

For the magnifying glass image, you can use the background-image property to overlay it within the span element. Additionally, relative positioning can be employed to align the image with the right end of the search box.

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

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

In the CSS code, the width and height determine the size of the image, while the left and top properties position it relative to the search box. The background-color property can be replaced with the URL of your desired magnifying glass image.

Here is a working example on JSBin to demonstrate: [Link to JSBin Example]

The above is the detailed content of How to Create a Search Button within a Text Input Field?. For more information, please follow other related articles on the PHP Chinese website!