How to Create a Custom \"Search\" Button with a Magnifying Glass Icon?

Embellishing Text Input Fields with a Custom "Search" Button

To create a similar search element to the one seen on certain websites, follow these steps:

Creating the Basic Structure:

1. Code a text input field:

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

2. Include a tag to hold the magnifying glass image:

<code class="html"><span id="g-search-button"></span></code>

Adding the Magnifying Glass Image:

To incorporate the magnifying glass image, assign it using CSS's background-image property:

<code class="css">#g-search-button {
  background-color: black;  /* Replace with your own image */
}</code>

Positioning and Styling:

To position the image within the text input field:

<code class="css">#g-search-button {
  position: relative;
  left: -22px;
  top: 3px;
  width: 16px;
  height: 16px;
}</code>

This places the image slightly to the left, overlapping the right edge of the search box.

Customization:

Modify the appearance of the button by adjusting the values in the #g-search-button CSS block, including the background color, size, and positioning.

Example in Action:

Refer to the following JSBin example to see a fully functional implementation of the search element:

[JSBin Demo](https://jsbin.com/xahepu/edit?html,css,output)

The above is the detailed content of How to Create a Custom \"Search\" Button with a Magnifying Glass Icon?. For more information, please follow other related articles on the PHP Chinese website!