Home >Web Front-end >CSS Tutorial >How to Create a Custom \'Search\' Button with a Magnifying Glass Icon?

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

Patricia Arquette
Patricia ArquetteOriginal
2024-11-02 10:12:02950browse

How to Create a Custom

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>
  1. 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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn